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Введение 


Человек, увлеченный работой на компьютере рано или поздно 
придет к выводу, что все коммерческие приложения которыми он 
по іьзуется, недостаточно хороши для него Есть множество средств 
создания персональных \ѴеЪ-страниц — от простейших редакторов 
бесплатно предостав іяемых администраторами \ѴеЬ -серверов, до та 
кихвысокопрофессиональных, как МісгозоК ЕтопіРа#с и Масгоиіейіа 
Ог 'ап) \ѵсаѵет Но созданным с их помощью документам НТМЬ недо¬ 
стает интерактивности способности изменяться в ответ на запросы 
по іьзователя и быть посредником в диалоге между вами и посетите 
лями \ѴёЬ страницы С помощью сценариев встроенных в НТМЬ код 
ѴѴоЬ-страницы, вы сможете сделать ваш документ таким же «умным», 
как вы сами, вдохнуть в него жизнь и собственный характер 

Сценариями называются программы, написанные на языке по¬ 
нятном обозревателю В этой книге мы пзѵчим ІнѵсЧстірІ пожалуй, 
наиболее популярный язык написания сценариев для \ѴеЬ страниц. 
.|.іѵа‘ѵтір( нельзя отнести к «серьезным» языкам программирования 
Разработчики стандартов этого языка из компании №г$саре постара¬ 
лись максимально упростить его, потому что во-первых, многие раз¬ 
работчики \ѴеЪ страниц нс являются профессиональными програм¬ 
мистами, а во вторых использование сценариев не предполагает ре 
шения грандиозных проблем Сценарии — это специи, при разумном 
и умеренном использовании которых повар превращает обычную 
похлебку в кулинарный шедевр Кроме того если до сих нор вам не 
приходилось заниматься программированием написание сценариев 
станет для ваг первым шагом на этом увлекательном пути 

Структура книги 

Данная книга состоит из семи глав. В главе 1, «Знакомство с 
.Іаѵа$сгір1>, вы получите общее представление о принципах написа¬ 
ния сценариев и круге проблем, которые можно решить с помощью 
этих средств. 

Сценарии не существуют сами по себе. Они всегда являются час¬ 
тью ѴѴеЬ-страницы и должны быть органически вписаны в НТМГ -код 
Документа. В главе 2, «|аѵа5сгірІ и НТМ1>, вам будет представлен об- 
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зор дескрипторов НТМЬ, а также описаны способы добавления сце¬ 
нариев и активизации их в коде \ѴёЬ-страннцы 

Более подробно о том, как заставить сценарий выполняться тог¬ 
да, когда в зтом возникнет необходимость, рассказывается в главе 3 
«Использование сценариев в динамических \ѴеЬ страницах». 

Что отличает \ѴеЬ страницы от текстовых иллюстрированных до 
кѵментов для печати? Любая программа — это работа с данными, т.е. 
с информацией, которая поступает от пользователя, компьютера или 
из базы данных. Глава 4, «Работа с данными в сценариях |л\ , 1 ,‘мтірі '• 
посвящена типам данных, а также особенностям хранения и обра¬ 
ботки данных разных типов в сценариях |аѵнЬсмрІ Полезным будет 
знакомство с коллекциями методов выполнения сложных математи¬ 
ческих вычислений и обработки текста, собранных в объектах МаГЬ и 
БЬгіпд. 

«Умная» программа отличается тем, что ее выполнение зависит от 
условий, заданных пользователем. В і лаве 5, «Управление ходом вы¬ 
полнения сценария», речь пойдет о том, как разветвлять код сценария, 
организовывать циклы и устанавливать таймер вызова функций. 

Из главы 6, «Элементы мультимедиа в динамических ѴѴеГ стра¬ 
ницах», вы узнаете об управлении графикой, звуковыми и видеокли¬ 
пами с помощью сценариев. 

В главе 7, «Обмен данными и сохранение информации на дис¬ 
ке», рассматриваются средства предоставляемые языком ^ѵаЗсгірі 
для организации диалога между разработчиком и пользователем 
\УеЬ-страницы, между окнами обозревателя и между документом 
НТМЬ и простейшими внешними базами данных. В этой главе также 
описан простейший редактор базы данных, удобный для использова 
ния на собственном компьютере или в сети іпігапеі. 

Соглашения, принятые в книге 

Прежде чем переворачивать страницу и переходить к чтению глав 
этой книги, обратите внимание на следующие моменты. Названия эле¬ 
ментов пользовательского интерфейса программы (кнопок, команд, 
меню, диалоговых окон и т.п.) в тексте книги выделены специальным 
шрифтом. Для обозначения команд, расположенных в меню програм¬ 
мы, будет использоваться стрелка ( с >). Например, запись «выберите 
команду Вставка 1 ^ Рисунок^ Из файла» означает, что вам необходимо 
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открытъ меню Вставка (ще ткнув на его названии в строке меню) вы¬ 
брать в нем подменю Рисунок и затем в этом подменю щелкнуть на 
команде Из файла. Кроме того, вам будет предлагаться ввести с кла¬ 
виатуры НТМЬ-код страницы, код сценария или ЕЖЬ адрес Слова 
которые нужно набрать- также выделены соответствующим образом. 
В некоторых случаях в листингах и в примерах проі раммного кода 
показан временный текст, который нужно заменить в конечном коде. 
Новые термины при первом упоминании или определении их в кни¬ 
ге выде іяются курсивом. 

В данной книге используются пиктограммы, акцентирующие ваше 
внимание на отдельных абзацах. 


/■ Такой пиктограммой отмечены полетные сведения, ко¬ 

та заметку] торые помогут вам более эффективно использовать ин- 
V у струменты и возможности ѴѴеЬ-страниц. 


ЛА Очень вниі іательно отнеситесь к сведениям, помечен- 
\ Внимание^ ным такой пиктограммой Они помогут вам избежать 
I ~ і ошибок, которые могут стать причиной как мелких, так 
и более серьезных проблем 

Ѳ Разумеется, в данной книге описывается довольно боль¬ 
шое количество примеров выполнения практических 
задач. Для удобства абзацы в которых демонстрируют- 
ся примеры применимые на практике будут помечены 
этой пиктограммой 

Все примеры в этой книге бы ли опробованы с помощью обозрева¬ 
теля Іпіегпеі Ехріогег 4.0 на компьютере РС. Некоторые из приме¬ 
ров, представленных в листингах этой книги, не будут выполняться 
при использовании более ранних версий Іпіегпеі Ехріогег, в других 
обозревателях и на компьютерах с иной платформой. 




Глава 1 

Знакомство с іаѵаБсгірГ 


Эга киша предназначена для начинающих разработчиков \УеЪ- 
страниц, имеющих наиболее общие представления о технологиях 
\ѴеЪ и НТМЬ-коде. Язы к фѵѵаЗс гі рЬ используется для написания сце¬ 
нариев, с помощью которых статические ѴѴеЬ-страиицы превращают 
ся в интерактивные средства общения разработчика с посетителями 
\ѴеЬ-страниц. Эффективность документов НТМЬ существенно воз¬ 
растет, если пользователи смогут динами чес к и изменять вид и содер¬ 
жимое \ѴеЬ-страниц в соответствии с собственными предпочтениями 
и запросами, вводить пользовательскую информацию в іюля формы, 
направлят ь сообщения и комментарии разработчику \ѴеЬ-страницы. 
Если вам никогда не приходилось заниматься программированием, 
пусть вас это не пугает. |аѵаЗегірІ один из наиболее простых язы¬ 
ков программирования, не требующий глубоких познаний в области 
компьютерных технологий. Многие сценарии на ^ѵаЗсгірІ состоят 
всего из очной или нескольких команд, которые изменяют свойства 
элементов документа НТМЬ. Вам не нужно знать все тонкости вза¬ 
имодействия сценария ^ѵа5с.гірІ с НТМЕ-кодом и приложением 
обозревателя, за исключением общих принципов, изложенных в этой 
книге. 

Что такое ІаѵаБсгірі 

Язык ^ѵаЗсгірі для написания сценариев \ѴеЬ-страниц был раз¬ 
работан компанией ЫеЬсаре Согрогаііоп. Сценарии ^ѵаЗсгірГ не мо- 
іут существовать как самостоятельные приложения. Они привязаны 
к НТМЕ-коду \ѴсЬ~ страницы и могут выполняться только при уча¬ 
стии приложения обозревателя. 

По синтаксису ^ѵаЗсгірІ немного напоминает язык Даѵа, но это 
только внешнее 1 сходство. 

С помощью сценариев ^ѵаЗсгірі можно выполнять следующие 
задачи: 
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♦ создавать анимационные эффекты с текстом и графикой: 

♦ воспроизводить звуковое сопровождение страницы в соответ¬ 
ствии с контекстоь 

♦ динамически изменять вид и содержимое страницы; 

♦ проверять и передавать данные, введенные пользователем 
в поля формы. 

Несмотря на то что язык .ІаѵаБсгірІ был разработан в 
компании ИеТзсаре, сценарии .ІаѵаБспрІ лучше работа¬ 
ют в МІСГ 050 ІІ ІпТегпеІ Ехріогег, чем в №(зсаре №ѵідаТог. 
Другой язык написания сценариев — ѴВ5сгірТ - под¬ 
держивается исключительно обозревателем ІпТегпеІ 
Ехріогег, что делает его менее популярным. 

Сценарии )аѵа5сгірТ выполняются на стороне кли 
ентв, т.е код сценария выгружается по сети на ком¬ 
пьютер клиента и выполняется обозревателем Аль¬ 
тернативным решением может быть использование 
программ ССІ (Соттоп Саіеѵѵау ІпТегЕасе — интерфейс 
общего доступа), которые выполняются на ѴѴеЬ-сер- 
вере Сценарии ІаѵаБсгірТ работают быстрее, но недо 
статок этого подхода состоит в том. что выполнение 
сценариев может быть отключено в параметрах обо 
зревателя. 




.ІаѵаБсгірІ и другие языки 
программирования 

Чтобы лучше оценить достоинства и недостатки языка ^аѵаЗсгір^:, 
сравним его с другими популярными языками программирования. 

Программные коды 

Компьютеры способны понимать только язык, в основе которого 
лежит бинарный машинный код. Этот код напоминает азбуку Морзе, 
состоящую из точек и тире, за тем исключением, что все «слова» ма¬ 
шинного кода имеют одинаковую длину, соответствующую разрядно¬ 
сти машины. 
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Машинный код, понятный компьютеру, совершенно непостижим 
для обычного человека. Трудно представить, каким авторитетом 
пользовались в 60-х годах прошлого столетия компьютерные гуру, 
вырезавшие код программы в виде дырочек на перфокартах и пер¬ 
фолентах. 

Сейчас в программировании на машинном коде нет необходимо¬ 
сти. Люди давно изобрели много разных языков программирования, 
которые выступают в роли посредника между человеком и машиной. 
Язык программирования — это программа, которая «читает» текст 
исходного кода, содержащего более привычные команды, такие как 
ргіпс (печать) или сору (копировать), и автоматически преобразует 
их в двоичные машинные команды. По способу преобразования ис¬ 
ходного кода в машинный код языки программирования подразделя¬ 
ются на компилируемые и интерпретируемые. 

Компилируемые языки программирования 

Код, написанный на компилируемом языке, передается в про¬ 
грамму-компилятор, которая прежде всего проверяет код на наличие 
ошибок, а затем переводит текст программы в бинарный машинный 
код и сохраняет результат в исполняемом файле (с расширением .ехе) 
или в библиотеке программных модулей (с расширением ЛИ). Если 
компилятор обнаруживает в исходном коде ошибки, процесс компи¬ 
ляции останавливается и разработчику отправляется список ошибок. 
После исправления ошибок компиляция начинается сначала. Таким 
образом, невозможно скомпилировать программу, в коде которой 
есть синтаксические ошибки. К сожалению, компилятор не защищает 
разработчика и будущих пользователей от логических ошибок в коде 
программы, которые уже невозможно исправить в конечном файле. 
Другая проблема состоит в несовместимости программ, созданных 
для разных операционных систем и компьютерных платформ. Так, 
для того чтобы программа, написанная на С++, работала на компью¬ 
терах с операционными системами \Ѵіпсіо\ѵ5, 08/2 и МасіпіозЪ, не¬ 
обходимо использовать соответствующие компиляторы. Кроме это¬ 
го, часто приходится вносить изменения в исходный код програм¬ 
мы, поскольку компиляторы разных систем стандартизированы не 
в полной мере. 

К компилируемым языкам программирования относятся языки 
семейства С (С, С++ и С#), ^ѵа и многие другие. 
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Интерпретируемые языки программирования 

Программы-интерпретаторы, в отличие от компиляторов, считы¬ 
вают исходный код построчно и переводят в машинный код каждую 
строку отдельно. Программы на интерпретируемых языках могут вы¬ 
полняться только в том случае, если на компьютере установлен соот¬ 
ветствующий интерпретатор. Из-за того, что каждый раз при запуске 
программы интерпретатору приходится вновь и вновь переводить 
исходный текстовый код в машинный, интерпретируемые програм¬ 
мы выполняются почти в 1 000 раз медленнее компилированных про¬ 
грамм. С другой стороны, поскольку исходный код всегда находится 
под рукой, легко изменять его и исправлять обнаруженные логиче¬ 
ские ошибки. 

^ѵаЗсгірІ относится к интерпретируемым языкам программи¬ 
рования. В качестве интерпретатора выступает обозреватель ІпГегпеГ 
Ехріогег или КеТзсаре Ыаѵщаіог. Поэтому сценарии на ДаѵаБсгірІ не 
могут выполняться вне обозревателя. Вместе с гем привязка сцена¬ 
риев ^ѵаЗсгірІ к рабочей среде обозревателя делает их менее чув¬ 
ствительными к платформе и операционной системе пользователя. 
Базовые команды ^ѵаЗсгірС должны выполняться одинаково как на 
компьютерах РС, так и МагііііозЬ в соответствующих обозревателях. 

У^Л Выполнение сценариев 1аѵа5сгір1 стандартизировано 

о 

Добро пожаловать в мир іаѵаБсгірІ 

Чтобы лучше познакомиться с ^ѵаЗстірІ, просто приступайте к 
написанию сценариев в \ѴеЬ-страницах. Сценарий в действии можно 
посмотреть, открыв ѴѴеЬ-страннцу в окне обозревателя. На рис. 1.1 
сценарий на ^ѵаЗстірГ приветствует нас в окне сообщения, которое 
открывается автоматически во время загрузки \ѴеЪ-страницы, код ко¬ 
торой показан в листинге 1.1. 

Листинг 1.1. Добро пожаловать в мир ІаѵаЗсгірі 

<нтмь> 

<НЕАД> 

<ТІТЬЕ>Добро пожаловать в мир ^ѵа5сгірі;</ТІТЪЕ> 

</НЕАР> 
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<ВОБУ (ЖлЭАБ="а1егб ('Добро пожаловать в мир ^ѵаБсгірг!') "> 
<Р>Окно с приветствием показывает функция <В>а1егб</В>, 
присвоенная событию ^В>ОМШАБ< /В></Р> 


</ВОБѴ> 

</нтмь> 



^ • о ^ * 4В 

^ *>« *>г* -АѵС'Ѵ-і * ^ - 


і вг>«39г«<*;&*»*« $**кцгѵ аЯеК- 'и-вш^иях* и г кго»- 
ШІА>АР 




Рис. 1.1 ,]аѵа$сгірІ приветствует оси 


С дескрипторами языка НТМІ_, функциями и назначе¬ 
нием функций событиям вы познакомитесь более под¬ 
робно в главе 2. 

Код листинга 1.1 можно ввести в простейшем текстовом редакто¬ 
ре Блокнот или \Ѵогс1Раі1 и сохранить в файле с расширением . Ъш 
или . Ьбті. Двойной щелчок на имени фаііла откроет документ в окне 
обозревателя, установленного на компьютере, как показано на 
рис. 1.1. Сценарий |аѵа$сгірГ на этой странице сводится к единствен¬ 
ной строке: 

СЖЬ0А0="а1еіС {'Добро пожаловать в мир ^ѵаВсгірС 1') " 

В этой строке стандартная функция языка фѵѵаЬсгірі — аіегс () — 
назначается событию (ЖШАО, которое активизируется каждый раз 
при загрузке \ѴеЬ-страницы. В результате выполняется функция 
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аіегг которая отображает в окне сообщения текст, добавленный 
между скобками функции. Любые изменения функции ві тупят в си¬ 
лу сразу же после повторного открытия \ѴёЬ страницы 


Основы объектно-ориентированного 
программирования 

Вам. конечно, приходилось слышать об объектно-ориентирован¬ 
ных языках программирования. Сразу скажем, что ^ѵа$сгірТ не от¬ 
носится в полной мере к таким языкам, но в синтаксисе ^ѵа$сгір( 
используются подходы объектно-ориентированного программирова¬ 
ния. И, что особенно важно для разработчиков, ^ѵаЗсгірІ позволяет 
использовать уже существующие программные объекты, встроенные 
в обозреватели. 

Что такое программный объект ? Представьте себе, что 
вы водитель автомобиля. Чтобы управлять автомоби¬ 
лем, достаточно знать правила дорожного движения и 
функции нескольких педалей и индикаторов на прибор¬ 
ной панели. Полезно знать, каким образом энергия бен 
зина преобразуется во вращение колес, но для управ¬ 
ления автомобилем это не обязательно. Точно так же 
работает и программный объект, который представляет 
собой некоторую программу с рядом ключевых слов, с 
помощью которых можно управлять объектом, или ис¬ 
пользовать его для выполнения определенных задач. 

Чтобы воспользоваться объектом на практике, нам необходимы 
сведения о свойствах, методах и событиях данного объекта, а также 
ключевое слово, с помощью которого можно создать экземпляр объек¬ 
та. Посмотрите, например, как легко на \ѴеЬ-странице можно создать 
командную кнопку: 

сШРОТ ТУРЕ='ЬиССоп' ѴАЫШ= 'Щелкни здесь’ <ЖХІСК= " зеі* . 
вЬаСиз='Выполнен щелчок на кнопке'"> 

Нам не нужно писать программу, которая управляла бы самой 
кнопкой в окне обозревателя в ответ на наведение указателя мыши и 
при выполнении щелчка. Эта программа уже встроена в обозреватель 
и вызывается дескриптором <ІИРЦТ ТУРЕ='ЬиТСоп' >, или просто 
<ВЦТТШ>. Кроме того, в данной программе описано свойство ѴАШЕ, 
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которому присваивается надпись на кнопке, и событие ОМСЫСК, 
которому назначается функция обработки события щелчка на кноп¬ 
ке. В нашем примере щелчок на кнопке Щелкни здесь выводит в 
строке состояния текст «Выполнен щелчок на кнопке как пока¬ 
зано на рис. 1.2. 



Выше говорилось, что в программах используются 
объекты. При этом создаются их экземпляры Следует 
правильно понимать взаимосвязь между объектом и эк¬ 
земпляром. Объект - это то же самое, что рецепт яич¬ 
ницы в кулинарной книге, по которому можно приго¬ 
товить настоящую яичницу, — экземпляр объекта. Такое 
же отличие между описанием кнопки в программном 
коде и кнопкой в окне обозревателя, показанной на 
рис. 1.2. Экземплярам объектов в коде программы при¬ 
сваиваются уникальные имена. 

Объекты и их атрибуты 

Наиболее часто в сценариях ^ѵа8сгірІ нам придется обращаться к 
объектам, представляющим собой элементы \Ѵ<еЬ-страницы. С одним 
из таких элементов — командной кнопкой - вы уже познакомились 
в предыдущем разделе. Кнопка относится к элементам управления 
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формы, среди которых еще есть текстовые поля, флажки, переклю¬ 
чатели, списки и ир. Базовые объекты часто объединяются в объек¬ 
тах-контейнерах. Например, таким объектом является форма, со¬ 
держащая коллекцию элементов управления. Форма, в свою очередь, 
может быть элементом объекта рамки, а рамка элементом объекта 
йоситепС, содержащего все элементы \ѴеЬ-страницы, отображенные в 
объекте еще более высокого уровня, міпсіом. Даже абзац или выде¬ 
ленный фрагмент текста также являются объектами. Таким образом, 
все. что мы видим на \ѴеЬ-странпцс, — это объекты разных типов. 

Но объекты не ограничиваются только «видимыми** элементами. 
В сценариях нам придется использовать объекты, представляющие 
собой коллекции полезных функций, или, точнее, методов. Напри¬ 
мер, объект ЗТгіпд представляет собой коллекцию методов для рабо¬ 
ты с текстом, а объект МаьЬ набор математических и тригонометри¬ 
ческих функций и констант. 

Несмотря на ошеломляющее разнообразие объектов, между ними 
есть много общего. Работа с объектом всегда начинается с создания 
его экземпляра. Для управления объектом используются его атрибу¬ 
ты, представленные свойс і вами, методами и событиями объекта. 

В этой главе мы рассмотрим многие стандартные объек 
ты, используемые в сценариях іаѵаЗсгір! Список и опи 
сание дополнительных объектов вы можете найти в до 
кументации обозревателей, в том числе и в Интернет. 

♦ Свойства определяют вид и особенности (поведение) объекта. 
К свойствам относятся такие атрибуты, как ширина и высота 
рамки элемента в окне обозревателя, цвет, текст и пр. Все свой¬ 
ства могут устанавливаться и изменяться динамически во вре¬ 
мя просмотра \ѴсЬ-стран ицы с помощью сценариев Да ѵаЗсгірі. 

♦ Методы представляют собой встроенные функции, предна¬ 
значенные для выполнения объектом определенных задач. 
Например, методы объекта МаСЪ используются для выполне¬ 
ния математических вычислений, а метод Еосиз элементов 
\ѴеЬ-страницы выделяет соответствующий экземпляр объекта 
цветом, рамкой и переносом курсора. 

♦ События устанавливают взаимосвязь между действием 
пользователя над объектом и внешней функцией обработки 
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события Например, щелчок мышью на кнопке выбывает со¬ 
бытие ОЖХІСК и соответственно, функцию, назначенную 
этому событию. 

Синтаксис обращения ко веем атрибутам объектов одинаков: имя _ 
экземпляра, атрибу: ’. Ботее подробно об именовании и иерархии 
объектов будет рассказано в следующем разделе 

/" 'ч Можно использовать не только готовые встроенные 

(На заметку] объекты но и создавать свои пользовательские объек- 
Ч. У ты, например для временного сохранения промежуточ¬ 

ен ных данных. Создание объектов новых типов выходит 
за рамки этой книги. 


Объекты и их имена 


\ѴеЪ-страница представляет собой набор объектов. Одни объекты 
содержат в себе полезную информацию, например: текст или рису¬ 
нок. Другие объекты выполняют роль контейнеров и содержат кол¬ 
лекции объектов нижнего уровня. Так, форма представляет собой 
коллекцию элементов управления. Объекты образуют многоступен¬ 
чатую иерархию, как показано на рис. 1.3. 

Объект высшего уровня представлен окном обозревателя. Окно 
содержит либо отдельный документ, либо структуру рамок, в каждой 
из которых содержится свой документ. Документы могут содержать 
абзацы текста, таблицы, рисунки, формы, причем эти элементы могут 
быть вложенными друг в друга (см. рис. 1.3) 

Чтобы управлять объектами \УеЬ-страницы с помощью сценари¬ 
ев, необходимо иметь возможность обращаться к каждому объекту 
по имени. 

♦ Объектам верхнего уровня автоматически присваиваются стан¬ 
дартные имена: 

• міпбом — окно; 

• боситеш: документ в окне или рамке; 

• €огш форма. 



Стандартные имена можно использовать только в том 
случае, если на данном уровне в иерархии больше нет 
объектов такого типа. 
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Рис. 1.3. Иерархия объектов окна обозревателя 

♦ Объекты автоматически добавляются в соответствующие кол¬ 
лекции под пользовательскими именами и порядковыми но¬ 
мерами в той последовательности, в какой они создавались в 
коде \ѴеЬ-страницы (подробнее коллекции объектов описаны 
в главе 6). Вот некоторые стандартные коллекции: 

• аіі [} - все элементы страницы; 

• Сгашез [ ] — коллекция рамок; 

• Еоггпб [ ] — коллекция форм; 

• еіешепсе [ ] — коллекция элементов управления формы; 

• ішадез [ ] — коллекция рисунков. 

♦ Объектам можно присваивать пользовательские имена с по¬ 
мощью атрибутов NАМЕ и Ю (подробнее об этом см. в главе 2). 
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Пользовательское именование объектов не препятствует обра¬ 
щению к объекту по стандартному имени (если объект уника¬ 
лен) или как к элементу коллекции. 

Обращаясь к объекту, указывайте путь в иерархии. При этом ис¬ 
пользуется синтаксис, показанный на рис. 1.4. 



■ 

" 


атрибут' 


сіоситепі 

— 


свойство 

ѵѵіпгіоѵѵ ■ 

имя _рамки 

аІІ[] 

имя^формы 

-имяэлемента- 


. 
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Рис. 1.4. Синтаксис обращения к элементам 1 ѴеЪ-страницы 

Имена объектов в иерархии разделяются точками. После имени 
объекта указывается имя атрибута (свойства или события), значение 
которого нужно изменить. Например, в следующем примере устанав¬ 
ливается цвет фона документа в рамке с именем шаіп: 
ѵйпйои . шаіп . босшіепс . Ьдсоіог = ' гей' 

(Подробнее об установке цвета фона документа см. в главе 2.) 

Если вы не в полной мере уяснили принципы взаимодействия 
объектов \ѴеЪ-страницы, не отчаивайтесь. Многое станет ясно в по¬ 
следующих главах, когда мы перейдем к рассмотрению практических 
примеров. 

Инструменты для создания 
и тестирования сценариев 

Для работы над сценариями вам не потребуется устанавливать 
на компьютер никаких специальных программ. Все необходимое 
наверняка у вас уже есть. Для написания сценария, как и для редак¬ 
тирования НТМЬ-кода \ѴеЬ-страницы, можно использовать про¬ 
стейшие текстовые редакторы — Блокнот и Ѵ/огбРаб. Проверить 
работоспособность сценария сразу же после написания можно 
с помощью приложения обозревателя, установленного на вашем 
компьютере. Для создания эффектов анимации вам еще могут по¬ 
требоваться графический редактор или другие специальные редак¬ 
торы файлов мультимедиа. 
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Обозреватели Интернет 

Обозреватели служат для просмотра \ѴеЪ-страниц на серверах, 
подключенных к сети Интернет. Обозреватель преобразует НТМЕ- 
код в форматированный текст с рисунками и внедренными объекта¬ 
ми мультимедиа, а также выполняет сценарии, находящиеся в коде 
\ѴеЬ-страницы . 

Несмотря на то что код НТМЬ и язык ^ѵаЗсгірІ: стандартизиро¬ 
ваны в соответствии с международными договоренностями, эти стан- 
тарты поддерживаются в разных обозревателях не в полной мере. 

ІЧеІзасаре и МогіІІа 

В начале и середине 90-х годов прошлого столетия приложение 
Ыеізсаре К т аѵідаіог было безусловным лидером среди обозревателей. 
Именно в компании Ыеізсаре разработан язык ^ѵаЯсгірІ для написа¬ 
ния сценариев. Более того, начиная с версии Иеізсаре Иаѵі^аіог 2.0 
в программу добавлена утилита для написания и редактирования 
сценариев Сотрозсг. Для открытия окна редактора в приложении 
Ыеізсаре Каѵі^аіог нужно выбрать команду СоттипісаІог^Сотрозег 
Впрочем, Сотрозег представляет собой довольно примитивный тек¬ 
стовый редактор, сопоставимый с приложением ЛѴогсІРасІ. 

Во второй половине 90-х Каѵі^аіог был основательно вытеснен 
приложением ІпІегпеС Ехріогег, которое распространялось бесплатно 
вместе с операционной системой \Ѵни1о\ѵз. После неудачной попытки 
обвинить компанию МісгозоЙ в нерыночных методах конкуренции 
компания Кеізсаре решила пойти дальше и выступила с инициати¬ 
вой открытия программных кодов приложений-обозревателей, чтобы 
мировое сообщество пользователей Интернет получило возможность 
конструировать и настраивать обозреватели в точном соответствии 
со своими требованиями. Результатом реализации этой инициативы 
стал обозреватель МогіІІа. Доступ к этому приложению и к его про¬ 
граммному коду открыт на сервере мѵтм . шогіііа . огд. 

Іпіегпеі Ехріогег 

Сценарии на ^ѵа^сгірТ поддерживались исключительно обозре¬ 
вателем Ие^зсаре Каѵі^аЬог до тех пор, пока не появился МісгозоЙ 
ІпТегпеІ Ехріогег 3.0. Ыеізсаре не делилась с МісгозоЙ технологией 
^ѵаЗсгірЕ Разработчики МісгозоЙ создали собственную версию 
языка, называемого ^егірі; в его основу были положены стандарты 
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}аѵа8ггірІ. Таким образом, ^ѵаЗсгірС и ^сгірг г го два языка с раз¬ 
ными интерпретаторами, по почти идентичным синтаксисом. Для 
нас данные нюансы не столь важны, поэтому далее мы будем гово¬ 
рить о языке ДаѵаЗсгірІ независимо от того, для какого обозревателя 
создаются сценарии- Поскольку приложение [іНсгпеІ Ехріогег более 
популярно в странах СНГ, далее в примерах мы будем использовать 
именно это приложение. Его окно показано на рис. 1.5. Обратите 
внимание на то, что некоторые сценарии, приведенные в листингах, 
могут не выполняться в приложениях Ыеінсаре Каѵі^аіог и Могіііа. 



Рис . 1.5 . Начальная страница приложения Іпіегпеі Ехріогег 


Настройка свойств обозревателя 

Способность обозревателей воспроизводить элементы \ѴеЬ-сіра- 
ницм зависит от пользовательских настроек свойств обозревате¬ 
лей. Интернет является небезопасной средой работы, через кото¬ 
рую распространяются компьютерные вирусы, черви и другие вре¬ 
доносные программы, в том числе реализованные в виде сценариев 
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Ѵ/еЬ-страниц. В обозревателях предусмотрены средства безопасно¬ 
сти, ограждающие ваш компьютер от вирусных атак. Но у этой меда¬ 
ли есть обратная сторона — чем надежнее системы безопасности, тем 
хуже обозреватель отображает содержимое \ѴеЪ-страниц, поскольку 
некоторые элементы попадают в разряд запрещенных. Прежде все¬ 
го это относится к сценариям на )аѵа8сгірІ и элементам управления 
АсІіѵеХ. Необходимо найти золотую середину, при которой безопас¬ 
ность компьютера будет сочетаться с удобством работы. 

Средства безопасности обозревателей не смогут пол- 
Свнимание^ носгью защитить ваш компьютер от вредоносных про- 
) у грамм, распространяемых по Интернет. Установите на 

^ компьютере лицензионное антивирусное приложение 

® и регулярно обновляйте базу данных вирусов в соот 
ветствии с рекомендациями изготовителя программы. 



Чтобы настроить работу обозревателя со сценариями, 
выполните следующее. 

1.В окне обозревателя выберите команду Сервис^ 
Свойства обозревателя. После этого откроется диа¬ 
логовое окно Свойства обозревателя. 


2. Перейдите ко вкладке Безопасность, как показано на рис. 1 .6. 



Рис. 1.6. Вкладка Безопасность диало¬ 
гового окна Свойства обозревателя 
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3. Для настройки работы обозревателя в сети Интернет выбери¬ 
те соответствующий значок в группе Выберите зону Интернета, 
как показано на рис. 1.6. 

4. С помощью бегунка в разделе Уровень безопасности для этой 
зоны выберите Высокий, Средний, Ниже среднего или Низкий 
уровень безопасности. По умолчанию установлен уровень 
Средний, что обычно соответствует искомой золотой середи¬ 
не. Если вы подключаетесь к Интернет через локальную сеть, 
защищенную надежной системой безопасности (технология 
брандмауэра или огненной стены), то уровень безопасности 
обозревателя можно снизить до значений Ниже среднего или 
Низкий. 

5. Щелкните на кнопке Другой. Откроется диалоговое окно Пара¬ 
метры безопасности, показанное на рис. 1.7. 


да* ** щ л*.***» 


’ЗЗ *х«<**4* «змием* 
кг & »яч«і 

■О «Яме**»* 



Рис. 1.7. Настройка выполнения 
сценариев обозревателем Іпіетеі 
Ехріогег 


6. Прокрутите список Параметры до раздела Сценарии. Можно 
установить для обозревателя выполнение определенного дей¬ 
ствия в случае обнаружения активного сценария или ^ѵа- 
аплетов на \ѴеЪ-странице либо в том случае, если сценарий 
пытается записать данные на диск или изменить содержимое 
окна. Предлагаются следующие варианты: 

• Отключить — сценарий не выполняется; 
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• Предлагать обозреватель показывает диалоговое окно 
с предложением подтвердить выполнение сценария; 

• Разрешить обозреватель выполняет сценарий без пре- 
дупреждений или каких-либо сообщений. 

7. Установите параметры так, как считаете нужным. Если затем 
вьг решите восстановить исходные установки, воспользуйтесь 
кнопкой Восстановить (см. рис. 1.7). Щелкните на кнопке ОК. 

8. Вы вернетесь к диалоговому окну Свойства обозревателя (см. 
рис. 1.7), но в нем исчезнет бегунок выбора уровня безопас 
ности Чтобы восстановить бегунок, щелкните на кнопке По 
умолчанию. 

9. Завершив установку параметров, щелкните на кнопке ОК. 

Обозреватель будет реагировать на сценарии в ШеЪ-странипах в 

соответствии с установками уровня безопасности и параметров. При 
открытии \УеЬ-страницы с активным сценарием может появиться 
предупреждающее сообщение вроде того, что показано на рис. 1.8. 



Рис. 1 . 8 . Предупреждение об обнаружении на 
странице активного сценария 


Внешний вид окна предупреждения зависит от типа и версии обо¬ 
зревателя, а также от операционной системы, установленной на ва¬ 
шем компьютере. Если вы уверены в надежности и безопасности про¬ 
сматриваемого документа, разрешите выполнение сценариев. 
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Текстовые редакторы 

Для написания сценариев подойдет любой текстовый редактор. 
Впрочем, такие сложные редакторы как МісгозоЙ ѴѴогб лучше не 
использовать, поскольку эта программа будет пытаться автоматиче¬ 
ски отформатировать текст документа, что может привести к ошиб¬ 
ке. Идеально подходят простейшие текстовые редакторы, такие как 
Блокнот или Ѵ/опІРасі. 

Приложение Іпіегпеі; Ехріогег позволяет извлекать НТМЬ-код 
\ѴеЬ-страницы и переносить его в текстовый редактор для изменения 


и сохранения. 



Выполните следующие действия. 

1. Откройте в окне обозревателя интересующую вас 
\ѴеЬ -страницу. Для этого введите ІЖЬ-алрес ресурса 
Интернет, как было показано на рис. і .5. 

2. Выберите команду меню Вид ^Просмотр НТМІ_- 


кода. Обозреватель автоматически запустит приложение 


Блокнот и отобразит в нем НТМБ-код ѴѴеЬ-страницы, как по¬ 


казано на рис. 1.9. 




{•»« 1 ЙГкЧ» •> . 

тг.вжг, 

(’біч т уре»’ 

^іад.ОГ/ 5ч*. <;5 і > 


чЖЫА ЬНр-йііЙѵ*' *&ЧМ№(Я--- г урК' .-с*ѵіЬЪ 
- ' 1 =г<. «Гу/ѵед/Зѵ 

ЭХЧфМЦб*-' ' Й ѵ* Л* 

* *»*.**<»• **>« • 

;\чі іуіР * ■, ' я'у/Х'у-ЛЪ !. 
гг.ж*г ,і>«Х 

«ж «и»» 5 Нѵ.*4- Ц->ГТ>1И!. >ч-у‘Л^ 
1* -ѵ '*&*■ 

-«/*<а 4 &л ✓ ••*«*<■ ’**«.* ‘ 

'(. О, >ч* ■}-*:%&.. /мціи-.вЗй» 

?к*<<« л?5 ѵ МИ . тѵъ'-' . «'**$**•* 
-'»г*ѵ > ѵ»(д *йвек*"'»ъ ѵ ыіфі» і+" *1* 

; ё*г' . «, 'тс--0 >'й Лл*<гав®''**і<* 4 *-3*,е«р* і 1х* лг .я*-’ 

‘СТР.дѴ" "«в?'* ' !*•>; Мл-Гя.; Іг 4'? * 

4»Х' _ I ѴВЯ«1>Р»Й*,'*Ѵ< 'йдаійв <1л*5» 

І>ГУ *' 1»~» 

ірх С$»> 

-еіѵ 

«Ж'діг-'Ьлугои-: ЭДрѵ; «іі'ігЬг №«$№' ь-,«?я.в1 

ѵ "<Ь-•<»«.- V ^ж;* 

’ ЙЛ^Д#ч. 'С ѵ» і "«Ы> ѴйГДО-ЙСМіІ# 


3. Измените код страницы. Например, добавьте сценарий (вы 
научитесь это делать в главе 2), выберите команду Файл ^Со¬ 
хранить как и сохраните документ в файле с расширением . Ы:т 
или .ЬЫпІ. 
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Графические редакторы 

На \ѴеЪ-страницах помимо текста часто используются звуковые 
и видеоклипы, элементы управления АсІіѵеХ, рисунки и графиче¬ 
ские элементы оформления. Для создания объектов разных типов 
применяются определенные редакторы. У нас нет возможности рас¬ 
сматривать средства редактирования всех элементов \ѴеЪ-страниц. 
Остановимся вкратце только на графических редакторах, поскольку 
рисунки и другие графические элементы встречаются на \УеЬ-страни- 
цах так же часто, как и текст. 

На \ѴеЪ-страницах используются графические элементы, сохра¬ 
ненные в файлах следующих форматов. 

♦ ,|РЕС Ооіпі РЬоГо&гарЬу Ехрегія Сгоир Объединенная груп¬ 
па экспертов в области фотографии). Файлы этого формата 
сохраняются с расширением . ]'рд Применяется для сохране¬ 
ния полноцветных изображений с миллионами цветовых от¬ 
тенков. При этом файлы ^ЕС характеризуются относительно 
небольшими размерами за счет эффективного сжатия, хотя 
сжатие файлов происходит с потерей качества изображения. 
Идеальный формат для цифровых фотографий и сканирован¬ 
ных изображений. 

♦ СІЕ (СгарЬіся ІпІегсЬап^е Рогтаі — формат графического 
обмена). Файлы этого формата сохраняются с расширением 
.діС Применяется для сохранения рисунков с ограниченным 
набором цветов — не более 256. Поддерживает эффект про¬ 
зрачности областей изображения. Эффективно сжимает фай¬ 
лы без потери качества. В одном файле можно сохранять серин 
изображений- Идеально подходит для сохранения рисунков 
и элементов графического оформления ѴѴеЪ-страниц, а также 
для создания эффектов анимации. 

♦ РІѴС (РогІаЫе №іигогк СгарЬіся — переносимая сетевая гра¬ 
фика). Файлы данного формата сохраняются с расширением 
.рпд. Сочетает в себе все преимущества форматовДРЕС и СІЕ, 
включая полноцветность, эффективное сжатие без потери ка¬ 
чества, поддержку эффекта прозрачности. Недостаток состоит 
в том, что не все обозреватели способны отображать изображе¬ 
ния в этом формате. 
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Есть много графических редакторов, которые можно использовать 
для создания, изменения и сохранения графических изображений 
для использования на \ѴеЬ-страницах. Наибольший выбор средств и 
инструментов предоставляет профессиональное приложение АсІоЬе 
РЬоІозЬор. Замечательное свойство этого приложения состоит в 
том, что оно предоставляет алгоритм оптимизации графики для ис¬ 
пользования в Интернет. Этот алгоритм запускается командой меню 
Файл ^Сохранить для ѴѴеЬ. В открывшемся диалоговом окне 5аѵе Рог 
ѴѴеЬ (Сохранить для \ѴеЪ) можно установить различные параметры 
оптимизации графики: выбрать формат, выполнить индексирование 
цветов рисунка, установить прозрачность, применить режим черес¬ 
строчного вывода изображения на экран (рис. 1.10). 


Рис. 1.10. Сохранение изображения для \ѴеЬ в приложении АдоЬе 
Ркоіоакор 

Недостаток приложения А(1оЬе РЬоІозЬор заключается в его 
сложности. Начинающему пользователю не просто научиться при¬ 
менять средства и инструменты этого приложения, а также разо¬ 
браться в смысле параметров, которые необходимо установить в диа¬ 
логовых окнах. 

К счастью, рисунки для \УеЪ-страниц можно создавать с помощью 
такого простого графического редактора, как Раіпі, который входит 
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в набор стандартных приложений ѴУіпйо\ѵ$. Для использования этого 
редактора, окно которого показано на рис. 1.11, не нужно профессио¬ 
нальных знаний и навыков. 



Рис. 1.11. Окна графического редактора Раіпі 

Приложение Раіпі позволяет сохранять изображения в любом из 
трех форматов, поддерживаемых обозревателями Интернет. Правда, 
данное приложение не позволяет создавать прозрачные области, из¬ 
менять степень сжатия файлов или устанавливать чересстрочный ре¬ 
жим выгрузки изображений. 

При выборе графического редактора обратите внимание на при¬ 
ложение Раіпі $1юр Рго, которое сочетает в себе простоту интерфейса 
и достаточно профессиональный набор инструментов редактирова¬ 
ния. Более подробно об этом приложении можно узнать на \УеЬ-узле 
иш. заве. сот. 

/ ѵ/\ Следует помнить о том, что потеря качества изображен 
ЧВнимание^ ния происходит при каждом сохранении. Поэтому 
) у все редактирование желательно вы пол н ять с изображе- 

Ѵг * ч ^‘ 0 ~ нием в ином формате, например ВМР или ТІР, а в фор 
® мате 1РЕС сохранить только окончательный вариант. 
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^ѵаБсгірі и НТМІ. 

Коды сценариев ЗаѵаЗсгірі неразрывно связаны с НТМЬ-кодом 
\ѴсЬ-страннцы и предназначены для динамического взаимодействия 
с элементами \ѴеЬ-страницы, созданными с помощью кода НТМЬ. 
Поэтому невозможно научиться программированию на Заѵа$спрІ без 
элементарных знаний о принципах кодирования содержимого \ѴеЪ- 
страниц. Но код НТМЬ чрезвычайно прост для понимания и легок в 
использовании. Прочитав эту главу, вы почувствуете себя достаточно 
уверенно в этом вопросе, чтобы сделать следующий шаг и приступить 
к программированию сценариев. 

Общие сведения о коде НТМЬ 

НТМЬ — НурегТехІ Магкіір Ьап^іш.це (язык і ииертекстовой раз¬ 
метки) — это средство создания \ѴсЬ-страниц. ДѴеЬ-страница пред¬ 
ставляет собой текстовый документ, содержащий обычный текст и 
дескрипторы НТМЬ — специальные текстовые командные символы, 
с помощью которых: 

♦ текст формируется в абзацы и задаются отступы текста; 

♦ выполняется форматирование текста; 

♦ прочерчиваются линии: 

♦ добавляются рисунки и другие объекты мультимедиа; 

♦ создаются гиперссылки на другие \ѴеЬ-страницы; 

♦ добавляются коды сценариев. 

Типы дескрипторов и принципы 
их использования 

В документе НТМЬ дескрипторы выделяются с помощью угло¬ 
вых скобок: <дескриптор>. Различают парные и непарные дескрип¬ 
торы. Пара состоит из открывающего и закрывающего дескрипто¬ 
ра: <дескриптор>...</дескриптор>. Эффект парных дескрипторов 
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распространяется на текст или объект, заключенный между ними. 
Отсутствие закрывающего дескриптора приводит к ошибке, за ис¬ 
ключением случаев использования непарных дескрипторов, которые 
не требуют закрытия. 

Различают блочные дескрипторы и дескрипторы форматирова¬ 
ния. Первые отличаются тем, что создают на \ѴеЬ-странице объек¬ 
ты, которым можно присвоить имя и использовать в коде сценария. 
Дескрипторы форматирования просто изменяют вид фрагмента тек¬ 
ста или объекта на экране, но не создают никаких новых объектов. 

Различают также обязательные и необязательные дескрипторы. 
Большинство дескрипторов используются по необходимости, но без 
дескрипторов, показанных в листинге 2.1, невозможно создать \ѴеЪ- 
страницу. 

Листинг 2.1. Обязательные дескрипторы создают заголовок 
и основной раздел ѴѴеЬ-страницы 

<нтмь> 

<НЕАО> 

<ТІТЬЕ>Моя страница< /ТІТЬЕ> 

</НЕАО> 

<ВСЮУ> 

<Р>Текст страницы</Р> 

</ВООѴ> 

</НТМЬ> 

Пара дескрипторов <НТМЬ>...</НТМЬ> создает объект документа 
\ѴёЪ-страницы, к которому в сценарии можно обратиться по ключе¬ 
вому слову сіоситепг. Документ НТМБ состоит из двух разделов — 
заголовка и основного раздела. Содержимое \ѴеЬ-страницы, отобра¬ 
жаемое в окне обозревателя, находится в основном разделе, тогда как 
заголовок содержит вспомогательную информацию о странице, как 
показано на рис. 2.1. 

Ввод кода ѴѴеЬ-страницы 

Для ввода и изменения кода \ѴеЪ-страницы лучше всего использо¬ 
вать простейший текстовый редактор Блокнот или \Ѵог^Раб. Обозре¬ 
ватель не различает регистр букв и игнорирует все дополнительные 
пробелы и разрывы строк. Тем не менее для упрощения работы с ко¬ 
дом \ѴеЬ-страницы желательно придерживаться некоторых общих 
стилистических правил. Например: вводите дескрипторы прописны- 
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Заголовок ѴѴеЬ-страницы 


і % Ме* сгрлинпа М 

ясго*©<1 Іпіегле! Рхріогег .«ПІЬ 

1 Фдйп Праеюв 


I 

В 

* Айрс ^ О ******* 1 


Текст страницы 


^ІГэтіе 




Содержимое Ѵ/еЬ-страницы 

Рис. 2.1 . Отображение в окне обозревателя данных из 
основного раздела документа НТМЬ и раздела заголовка 


ми буквами, чтобы выделить их в тексте документа; используйте от¬ 
ступы и разрывы строк для выделения логических блоков программ¬ 
ного кода. 


Ввод символов 

В тексте документа НТМЬ можно использовать все текстовые 
символы, вводимые с клавиатуры, а также специальные символы. 
Для ввода специальных символов используется код, представленный 
в табл. 2.1. 


Таблица 2.1. Коды специальных символов 


Символ 

Числовой код 

Именной код 

Описание 

■ 

&#34 

&циоІ 

прямые двойные кавычки 

& 

&#38 

&атр 

амперсанд 

< 

&#60 

&І( 

меньше 

> 

&#62 

&дІ 

больше 

€ 

&#1б2 

&сеп! 

евро 

Е 

&#163 

&роипсІ 

фунт 

У 

&#165 

&уеп 

иена 
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Символ 

Числовой код 

Именной код Описание 

§ 

&#167 

&5есІ 

параграф 

© 

»#169 

&сору 

авторское право 

® 

«#174 

&гед 

торговый знак 

і 

&#177 

&ркі5тп 

плюс-минус 


&#180 

&асійе 

ударение 

и 

&#181 

&тісго 

микрон 


&#182 

&рага 

абзац 

X 

&#215 

&1іте$ 

умножение 


«#247 

&сІіѵігіе 

деление 


Можно использовать как числовой, так и именной код. Оба вари¬ 
анта являются стандартными для всех обозревателей. Использовать 
код вместо символов следует в том случае, когда в тексте необходимо 
ввести символ, зарезервированный в языке НТМЬ в качестве команд¬ 
ного. Так, символы угловых скобок < и > выделяют в тексте \ѴеЬ-стра- 
ницы дескрипторы НТМЬ. Что же делать, если эти символы нужно 
ввести как обычный текст. Например, набор символов <Р> автомати¬ 
чески создаст новый абзац в тексте. Чтобы ввести текст «<Р>», вос¬ 
пользуемся кодом из табл. 2.1: &#60Р&#62. 

Комментарии в коде НТМІ. 

Во время работы над НТМЬ-кодом \ѴеЬ-страниц рекомендуется 
добавлять комментарии, напоминающие разработчику, какой элемент 
страницы определяется в танкой части кода. Комментариями назы¬ 
ваются строки текста в программном коде, которые не отображают¬ 
ся в окне обозревателя и не влияют на внешний вид и работу других 
элементов \УеЬ-страницы. В код НТМВ комментарии добавляются с 
помощью управляющих символов <! между которыми заклю¬ 

чается текст комментария. 


Создание новой ѴѴеЬ-страницы 



Создание \ѴеЬ-страницы можно очень удобно совме¬ 
стить с проверкой ее работоспособности. Давайте соз¬ 
дадим простейшую \ѴсЬ-страницу. 
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1. В приложении Проводник перейдите к папке, или создайте но¬ 
вую папку, в которую вы хотите поместить файл \ѴсЬ-страницы. 

2. На правой панели щелкните правой кнопкой мыши и выбери¬ 
те в контекстном меню команду Создать 1 ^ Текстовый документ, 
как показано на рис. 2.2. 



3. В папке появится значок нового текстового документа, имя ко¬ 
торого, Текстовый документ. СхС, будет выделено для редакти¬ 
рован ия. Введите новое имя, например бе Г аи 1 е. Ъш или іпбех . 
Ъсті. Нажмите <Епіег>. Появится предупреждающее сообще¬ 
ние о том, что было изменено расширение файла. Щелкните на 
кнопке Да. 

Файлам начальных страниц обычно присваивается имя 
аеЕаиІс.Ьсш или ііиЗех.ЬстІ. Обозоеватель автома¬ 
тически открывает зги файлы, если в ІІРІ_-адресе имя 
файла не было указано 

4. Щелкните на значке файла правой кнопкой мыши и выбери¬ 
те в контекстном пеню команду Открыть с помощью >Блокнс~ 
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Документ, пока что пустой, будет открыт в окне приложения 
Блокнот. 

5. Введите НТМЬ-код \ѴеЪ-с.траницы. например, показанный 
в листинге 1.1. Выберите команду Файл ^Сохранить, чтобы 
сохранить документ. 

6. Запустите обозреватель, установленный на вашем компьютере. 
Выберите команду Файл ^Открыть. В окне Открыть щелкните 
на кнопке Обзор и выберите вновь созданный файл на диске 
компьютера. Щелкните на кнопке Открыть. 

7. Содержимое \ѴеЬ-стран и цы отобразится в окне обозревателя 
(см. рис. 2.1). Теперь можно работать сразу с двумя приложе¬ 
ниями, как показано на рис. 2.3. 



Рис. 2.3. Файл Ѵ/еЬ-страницы можно одновременно от¬ 
крыть в окне текстовою редактора и окне обозревателя 
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8. Внесите изменения в НТМЬ-код или код сценария и сохраните 
документ, после чего в окне обозревателя щелкните на кнопке 
Обновить, чтобы посмотреть, какие изменения произошли во 
внешнем виде и функционировании \ѴеЬ-страницы. 


Настройка свойств элементов 
ѴѴеЬ-страниц 

Элементы \ѴеЪ-страниц создаются с помощью дескрипторов 
НТМЬ. Для создания элементов разных типов используются свои 
специфические дескрипторы, о чем подробнее речь пойдет в следую¬ 
щем разделе этой главы. Но настройка свойств объектов выполняется 
по общему плану: 

<ДЕСКРИПТОР АТРИБУТ.'_1 ~' значение ' АТРИБУТ_2 =' зна чение ' 

Атрибуты дескрипторов НТМІ. 

Дескрипторы разных типов имеют неодинаковые наборы атри¬ 
бутов. Дескрипторы форматирования, как правило, не имеют ника¬ 
ких настраиваемых свойств. В табл. 2.2 перечислены некоторые атри¬ 
буты, которые используются наиболее часто. 


Таблица 2.2. Атрибуты дескрипторов НТМІ 


Атрибут 

Описание 

Дескрипторы, 
в которых 

применяется атрибут 

Ю И ЦАМЕ 

Уникальное имя объекта, ко¬ 
торое можно использовать в 
сценариях. С назначением этих 
атрибутов возникла некоторая 
путаница. Вы поступите благо 
разумно, если присвоите оди¬ 
наковое имя обоим атрибутам 
объекта, к которому хотите по¬ 
лучить доступ в сценариях 

Все блочные дескрип¬ 
торы 

АІЯСЫ 

Выравнивание объекта в окне 
обозревателя или в рамке 

Рисунок, таблица, 
абзац 

ВАСКСКОШО 

Фоновый рисунок 

Документ, таблица, 
ячейка таблицы 
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Атрибут 

Описание 

Дескрипторы, 



в которых 

применяется атрибут 

В0К0ЕК 

Прорисовка границ объекта 

Рамка, рисунок, та¬ 
блица. 

соьок, вссоьов 

Цвет объекта, цвет фона объекта 

Документ, таблица. 

И ВОКОЕКСОШК 

и цвет границы объекта 

ячейка таблицы, текст 

НЕІСНТ И КІРТН 

Высота и ширина рамки объекта 

Бегущая строка, плава¬ 
ющая рамка, рисунок, 
проигрыватель фай- 



лов мультимедиа, та¬ 
блица, ячейка таблицы 

ІШЕКЯТМЬ И 

Содержимое блочных текстовых 

Абзац, раздел текста. 

ІШЕКТЕХТ 

объектов 

фрагмент текста, та¬ 
блица, ячейка таблицы 

БЕС 

Файл источника данных 

Рамка, рисунок, сце- 



нарий 

бтуье 

Стиль объекта 

Все блочные объект! 


Дескрипторы форматирования текста и фона 
ѴѴеЬ-страницы 

Обозреватель игнорирует все пробелы в тексте, в том числе и сим¬ 
волы конца абзаца, вводимые нажатием клавиши <Еп1ег>. Чтобы 
добавить новый абзац, нужно расположить текст абзаца между де¬ 
скрипторами :Р>.„</Р>. Обозреватель автоматически добавит пустую 
строку между блоками текста, относящимися к разным абзацам. По 
умолчанию обозреватель выравнивает текст абзаца влево и отобража¬ 
ет текст шрифтом черного цвета. Тип и размер шрифта выбираются в 
соответствии с текущими установками в параметрах обозревателя. 

Разработчики ѴѴеЬ-гтраниц могут отформатировать текст абзаца, 
используя для этого дескрипторы форматирования и позиционирова¬ 
ния, представленные ниже. 

Выравнивание абзацев текста 

Выравнивание текста в абзаце можно изменить, установив соот¬ 
ветствующий параметр атрибута АЫСЫ в дескрипторе <Р>, как пока¬ 
зано в листинге 2.1. 







.ІаѵаЗсгірІ и НТІѴИ 


41 


Листинг 2.1. Выравнивание абзацев 

<ВОБУ> 

<Р АЫСЫ = >Абзац выровнен влево</Р> 

<Р АЫСЫ = "сепЬег" >А6зац выровнен по центру</Р> 

<Р АЫСЫ = "гідЬР" >Абзац выровнен вправо</Р> 

<Р АЫСЫ = "зизЬіЕу" > Абзац выровнен по ширинес/Р> 
</ВОБУ> 

Результаты форматирования текста показаны на рис. 2.4. 




**ѵі Пир»:* }*« ЛІ***?* С«*** ■ :* ** 

,8 3& & 

№ж»яьѵ#г-**'*: 

* «у***»-- г...®.*. 

г *лаа *>*» ■;•«*<» 

Аі»*я іуцр;.*ч'з къ п*яггфѵ 

Аѵ^лѵ йжі-лиі?* ьлра№/ 

Л&зА*едч'»Х«Я 

< * 
#;<СГЬ)<К _ 

Рис. 2 4. Абзацы \ѴеЬ страницы 
с уипанпѵі.эи ризтчных пара¬ 
метров выравнивания теш та 



Если текст нужно начать с новой строки, но не с нового 
абзаца, воспользуйтесь непарным дескриптором раз 
рыва строки <вк>. Текст следующие за дескриптором 
<ВК;, обозреватель покажет с новой строки, но не будет 
добавлять пу< тую строку, как в случае с дескрипторами 


<Р>...</Р>. 


Пробелы и отступы 

Как уже говорилось выше, обозреватель игнорирует все дополни¬ 
тельные символы пробелов в тексте, включая символы табуляции. 
Поэтому средства текстовых редакторов, применяемые для установ¬ 
ки отступов и пробелов в тексте, обычно не подходят для формати¬ 
рования текста документа НТМІ-. Чтобы ввести дополнительный 
пробел, воспользуйтесь комбинацией управляющих символов &пЬзр. 
Повторите эту комбинацию символов несколько раз, чтобы ввести 
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подряд несколько пробелов. Так, в следующем примере создается аб¬ 
зац. начинающийся с красной строки в 5 символов: 
<Р>&пЬЕр&пЬзр&пЬЕр&пЬзр&пЬ8рЭтот абаза начинается с красной 

строки -- </Р> 



Комбинация символов &пЪер устанавливает неразрыв¬ 
ный пробел. Слова разделенные неразрывным про¬ 
белом, не будут отделяться при формировании строк 
в окне обозревателя Используйте неразрывный про¬ 
бел вместо обычного, если необходимо гарантировать 
размещение нескольких слов или символов, разделен 
ных пробелами в одной строке текста. 


Заголовки 

Пробежав взглядом по заголовкам, посети гель страницы быстро 
отыщет ту информацию, которая его интересует В НТМЬ исполь¬ 
зуются дескрипторы устанавливающие заголовки шести уровней 
от <Н1>...</Н1> до <Н6>...</Н6>. 



Не используйте на одной странице больше трех уров 
ней заголовков. Слишком сложная иерархия заголовков 
затруднит восприятие информации документ, - Кроме 
того, примите к сведению что шрифты только первых 
трех уровней больше размера основного текста страни 
цы. Шрифт 4-го уровня имеет такой же размер, как и 
основной шрифт, а размеры шрифтов заголовков 5-го 
и б-го уровней меньше основного шрифта Обычно за¬ 
головки 5-го и б-го уровней используют для выделения 
примечаний или сносок. 



Обозреватели автоматически добавляют пустые 
строки перед текгтом заголовка и после него. 

Введем код, приведенный в листинге 2.2. 


Листинг 2.2. Заголовки разных уровней 


-:Н1>Так выглядит заголовок 1-го уровня</Н1> 
<Н2>Так вы: лядит заголсвок 2-го уровня</Н2> 
<НЗ>Так выглядит заголовок 3-го ургвня</НЗ> 
<Н4>Так выглядит заголовок 4-го уровня</Н4> 
<Н5>Так выглядит заголовок 5- го уровнж К5> 
<Н6УГак выглядит заголовок 6-го уровнж Нб> 
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Введенные нами заголовки отобразятся в окне обозревателя, как 
показано на рис. 2.5. 



Рис. 2.5- Заголовки текста разных уровней 


Списки 

Список выглядит более наглядно и легче воспринимается с экра¬ 
на компьютера, чем обычное перечисление пунктов в тексте. На \ѴеЬ- 
страницах можно использовать нумерованные, маркированные или 
смешанные списки. Выбор типа списка зависит от того, насколько 
важна очередность пунктов в списке. Например, рецепт приготов¬ 
ления какого-либо блюда лучше представить с помощью нумеро¬ 
ванного списка, тогда как для перечисления блюд в меню лучше ис¬ 
пользовать маркированный список. 

Создание нумерованного списка 

Для создания нумерованного списка используется комбинация 
двух пар дескрипторов: 

♦ <0Ь>...</0Ь> — устанавливают начало и конец нумерованного 
списка; 

♦ <Ы>...</Ы> — отмечают отдельные пункты списка. 

Введем код листинга 2.3. 
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Листинг 2.3. Нумерованный список 

<Н2>Типы списков</Н2> 

<оь> 

<Ы>Нумерованный< /Ы > 

< Ы >Маркированный</Ы > 

<Ы >Многоуровневый< / Ы> 

</оь> 

Получится список, показанный на рис. 2.6. 



Рис. 2.6 . Нумерованный список 


Маркированные и многоуровневые списки 


Маркированный список следует применять для перечисления 
неупорядоченных равнозначных объектов, например блюд в меню 
ресторана. В том случае если существует иерархия объектов, удобно 
использовать многоуровневые списки. Пункты списка всегда задают¬ 
ся дескрипторами <Ы>...</Ы>, но чтобы указать обозревателю, что 



данный список является маркированным, использу¬ 
ются дескрипторы 

Многоуровневый список создать очень легко. Просто 
добавьте новый список после пункта, требующего дета¬ 
лизации, внутри другого списка, как в листинге 2.4. 


Листинг 2.4. Маркированный и многоуровневый списки 


<Н2>Типы списков</Н2> 
<0Ь> 

<Ы >Нумерованный< / Ы > 

< 01 ,> 

<Ы>Пункт 1</Ы> 
<Ы>Пункт 2</Ы> 
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<Ы>Пункт 3</Ы> 

</0Ь> 

<Ы >Маркированный</Ы > 

<ць> 

<Ы>Первый варианте /ІЯ> 

<Ы>Второй варианте /ІД> 

<ІЛ>Третий варианте /Ы> 

</ЦЬ> 

<Ы >Многоуровневый< (Ы> 
еОЬ ТУРЕ=“а"> 

<Ы>Пункт а</Ы> 

<Ы>Пункт Ъе/ІЛ> 
еЫ>Пункт се/Ы> 

</оь> 

</оь> 

Созданный нами многоуровневый список показан на рис. 2.7. 



Рис. 2.7. Многоуровневый список 



Обратите внимание на то, что в последнем вложенном 
списке пункты отмечаются не цифрами, а латинскими 
буквами в алфавитном порядке. Это обычный нумеро 
ванный список, но в открывающем дескрипторе списка 
<ОЬ> мы установили атрибут ТУРЕ="а’. Эта установка 
заменила цифровую нумерацию, заданную по умолча¬ 
нию, алфавитной нумерацией. 
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Форматирование элементов текста 

Дескрипторы форматирования текста, с которыми мы познако¬ 
мимся в этом подразделе, позволяют изменять формат отдельных 
слов или даже отдельных текстовых символов. Форматирование ис¬ 
пользуется для того, чтобы акцентировать внимание посетителя на 
наиболее важных моментах текста. Можно изменять цвет, начерта¬ 
ние и размер шрифта, добавлять подчеркивание или перечеркивание, 
вводить надстрочные и подстрочные символы, применять логическое 
выделение. Для этого используются следующие дескрипторы: 

♦ <В>...</В> — полужирный шрифт: 

♦ <!>„.</ 1> — курсив; 

♦ <11>...</и> - подчеркивание; 

♦ <5ТКІКЕ>...</5ТКІКЕ> перечеркивание; 

♦ <81ІР>._</81ІР> — надстрочный шрифт; 

♦ <ЗШ>...</5Ш> — подстрочный шрифт; 

♦ <РШТ атрибутное /РО№Г> — установка атрибутов шрифта: 

• Расе — имя шрифта; 

• еіге — размер; 

• соіог — цвет. 

Ниже показан пример установки атрибутов шрифта. 

<РОЫТ РАСЕ= 'ТітеБ Ыем Встал' ЗІ2Е='14' СОЬОЕ-*#РРОООО'>Шрифт 
Тітез Ием Котап, размер 14 кеглей, красного цвета</РОШ*> 

Значение цвета устанавливается шестнадцатеричными числовы¬ 
ми значениями красной, зеленой и синей цветовых составляющих. 
Для шестнадцати основных цветов, показанных в табл. 2.3, заданы 
именные коды, которые можно использовать вместо числовых зна¬ 
чений. Например, в следующих двух дескрипторах устанавливается 
красный цвет шрифта: 

<ГОЫТ со1ог=' #РР0000 '> 

<РСИТ соіог =' ге<3' > 

Таблица 2.3. Шестнадцатеричный и именной цветовые коды 


Цвет 

Шестнадцатеричный код 

Именной код 

Белый 

#РРРРРР 


Бирюзовый 

#008080 
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Окончание табл. 2.3 


Цвет 

Шестнадцатеричный код 

Именной код 

Желтый 

#РРГРОО 

уеііои 

Зеленый 

#008000 

дгееп 

Золотой 

#РРП700 

доій 

Красно-коричневый 

#800000 

шагооп 

Красный 

#РР0С0О 

гей 

Лимонный 

#00РР00 

Ііше 

Морской волны 

#00РРРР 

адиа 

Оливковый 

#808000 

оііѵе 

Пурпурный 

#800080 

ригріе 

Серебряный 

#С0С0С0 

зііѵег 

Серый 

#808080 

дгау 

Синий 

#0000РР 

Ыие 

Слоновой кости 

#РРРРР0 

іѵогу 

Тем но-голубой 

#000080 

паѵу 

Фуксиновый 

#РРО0РР 

ІисЪзіа 

Черный 

#000000 

Ыаск 


Чтобы изменить цвет шрифта для всей страницы — вместо чер¬ 
ного, который задан по умолчанию, установить какой-нибудь дру¬ 
гой, — воспользуйтесь атрибутом ТЕХТ в дескрипторе <ВОБУ>. Еще 
один атрибут этого дескриптора — ВССОЬОК — задает цвет фона стра¬ 
ницы. Например, в следующем примере устанавливается синий цвет 
для шрифта и желтый цвет для фона страницы: 

<ВООУ ВССОЬОЕ= 'уеііои* ТЕХТ= ' Ыие' > 
текст страницы... 

</ВСЮУ> 



Установки параметров шрифта с помощью дескрипто¬ 
ра <рсмт> имеют более высокий приоритет и отменяют 
установки, заданные в дескрипторе <всюу>. 


Графика на ѴѴеЬ-страницах 

\ѴеЬ-страница без рисунков выглядит скучно и уныло. Но за ри¬ 
сунки и графические элементы оформления Ѵ/еЪ-страницы приходит¬ 
ся платить свою цену. Графика часто значительно увеличивает размер 
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файла страницы, что замедляет время выгрузки документа по сети 
Интернет. Так. файл с довольно длинным текстом занимает, как пра¬ 
вило, 500 1000 байт и выгружается но сети практически моменталь¬ 
но. Наличие небольшого рисунка на странице, размером в 50 Кбайт, 
приведет к тому, что при подключении к Интернет но телефонному 
модему ѴѴеЬ-страница будет выгружаться на компьютер пользова¬ 
теля примерно Юс. Пользователи Интернет нетерпеливые люди. 
Один щелчок на гиперссылке, и пользователь покинет вашу страни¬ 
цу еще до того, как она выгрузится в окно обозревателя. Поэтому ис¬ 
пользуй те графику на \ѴеЬ-стра лицах в разумных пределах. 

Добавление рисунков 

В Интернет используются графические изображения только трех 
следующих форматов. 

♦ СІР (СгарЬісБ ІпіегсЬап^е Роппаі — Формат графического об¬ 
мена). Пожалуй, является основным форматом графики в Ин¬ 
тернет, поскольку он поддерживает сжатие без потери данных, 
передает прозрачность и позволяет сохранять в одном файле 
серии рисунков для воспроизведения эффектов анимации. Но 
цветовая палитра не может содержать более 256 цветов. Файлы 
этого формата сохраняются с расширением . діГ. 

♦ ^ЕС Ооіпі РІюІо^гарЬу Ехрегіз Сгоир — Объединенная 
группа экспертов в области фотографии). Его название яв¬ 
ляется аббревиатурой названия разработавшей его компании. 
Отличается максимальной скоростью передачи, поддерживает 
передачу цветовых полутонов, но сжатие файла происходит 
с потерей данных. Файлы этого формата с охраняются с расши¬ 
рением .зрд. 

♦ РІЧС (РогіаЫе Ыеіѵ/огк СгарЬісз — Переносимая сетевая гра¬ 
фика) является альтернативой форматам СІР и ^ЕС. В фор¬ 
мате РЫС реализован метод эффективного сжатия изображе¬ 
ний без потери данных, поддержка прозрачности и «одно¬ 
цветности изображений. Предполагалось, что данный формат 
станет универсальным для Интернет и заметит все остальные 
форматы, но пока многие обозреватели все еще не поддержива¬ 
ют показ изображений в этом формате. Файлы данного форма¬ 
та сохраняются с расширением .рпд. 
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Чтобы добавить рисунок на \УеЬ-страницу, используется дескрип¬ 
тор <ІМС>. Ниже показан пример добавления рисунка в коде НТ МП 

<ІМС ЗРС='ітадеБ\МуРісЬнге.ірд* НЕІСНТ=50 ШШН=100 
АЫСИ=1е€Р АЬТ- * Фотография * > 



Давайте добавим рисунок в документ НТМП 
і. Прежде всего нужно подготовить рисунок к ис¬ 
пользованию в Интернет. Откройте файл рисунка 
в графическом редакторе и выполните следующие 
действия. 


• Проверьте разрешение изображения, определите его 
размер В большинстве случаев для демонстрации ри¬ 
сунков на \ѴеЬ -страницах достаточно иметь разреше¬ 
ние в 72 пикселя/дюйм. (В приложении для этого ис¬ 
пользуется диалоговое окно Размер рисунка, показан¬ 
ное на рис. 2.8, которое можно открыть командой меню 
Изображение 1 ^ Размер изображения.) 

• Уменьшите размер рисунка до требуемого. Размер изо¬ 
бражения можно изменять непосредственно в докумен¬ 
те НТМЦ но это не приведет к уменьшению файла ри¬ 
сунка. (Используйте для этого диалоговое окно Размер 
изображения, как показано на рис. 2.8.) 



Рис. 2.8. Изменение размера и раз¬ 
решения рисунка в приложении АсІоЬс 
РЬоіозкор 


Если рисунок содержит ограниченное число цветов, вы¬ 
полните индексирование, чтобы отбросить лишнюю ин¬ 
формацию и уменьшить размер файла. В АбоЬе РЬоІозйор 
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для этого используется команда меню Изображение 1 ^ 
Режимѣ Индексированный. Установите количество цве¬ 
тов в открывшемся диалоговом окне Цвет с индексом 
(рис. 2.9). 



Рис. 2.9. Индексирование цвета в при¬ 
ложении АдоЬе РЪоІозкор 


• Сохраните рисунок в одном из форматов, поддерживае¬ 
мых обозревателями Интернет. Многие современные 
графические редакторы содержат в своем меню команду 
Файл ^Сохранить для Веб. Эта команда открывает спе¬ 
циальное диалоговое окно, которое позволяет выбрать 
правильный формат, установить степень сжатия и под¬ 
держку прозрачных областей, оптимизировать рисунок 
для просмотра в обозревателе Интернет, применить 
к рисунку чересстрочный или прогрессивный режим 
выгрузки. 

Чересстрочный режим применим к файлам в формате 
СІР, а прогрессивный — к файлам .ІРЕ6. В обоих случа¬ 
ях суть сводится к тому, что изображение выгружается 
с эффектом постепенного улучшения качества на ѴѴеЬ- 
странице, что позволяет читать документ, не дожидаясь 
полной выгрузки графики. 

Сохранять рисунок в формате ІРЕС следует только один 
Внимание 4 ) Р аз * ког Д а ВЬІ полностью завершили редактирование 
^ / изображения в другом формате. При каждом после- 

дующем сохранении качество рисунка в формате ^ЕС 
будет ухудшаться 
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2. Откройте файл \ѴеЬ-страницы в текстовом редакторе. Выбери¬ 
те в документе место, где должен появиться рисунок (более 
подробно о позиционировании элементов ѴѴеЬ-страницы рас¬ 
сказано далее, в разделе «Разметка \ѴеЪ-страницы>>). 

3. Введите с клавиатуры дескриптор <ІМС> и установите в нем 
следующие атрибуты. 

• ЗЕС — путь к графическому файлу. Обычно указывает¬ 
ся относительный путь от папки, в которой находится 
файл \ѴеЬ-страницы, например: ішаде/МуРісСиге . ірд. 
Можно также указать путь к графическому файлу, раз¬ 
мещенному по ІШЬ-адресу в Интернет: Ы:Ьр://мѵм. 
МуРаде.огд/Му РісСиге . і рд. 

Если на нескольких ѴѴеЬ- страницах имеются одина¬ 
ковые рисунки или графические элементы, всегда ис¬ 
пользуйте для всех страниц один и тот же графический 
файл, указав путь к нему в атрибутах зкс в разных де¬ 
скрипторах <ІМС>. Тем самым вы упростите редактиро¬ 
вание \Л/еЬ-страниц в дальнейшем, сохраните место на 
диске ѴѴеЬ- сервера и ускорите время выгрузки веб¬ 
страниц по Интернет. 

• НЕІСНТ и МІГУГН — устанавливают, соответственно, вы¬ 
соту и ширину рисунка в пикселях или в процентах от 
размера окна обозревателя. Размер файла изображения 
при этом не изменяется. 

• АЫСИ — значения ІеЕЕ и гідЫ: устанавливают вырав¬ 
нивание рисунка на странице, соответственно, влево и 
вправо с обтеканием текста с противоположной сторо¬ 
ны, а значения сор, шісМІе и Ьоссош выравнивают текст 
абзаца, в который добавлен рисунок, по верхнему краю, 
центру или нижнему краю рисунка. 

• АЬТ — текст для обозревателей, в которых отображение 
изображений отключено пользователем. 

• ЬОИЗЕС — путь к рисунку, который будет отображаться 
до того момента, пока не будет выгружено основное изо¬ 
бражение, указанное в атрибуте 8КС. Обычно в атрибуте 
ЬОМЗКС устанавливается вспомогательное изображение 
маленького размера с низким разрешением. 
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Использование рисунков в виде фона ѴѴеЬ-страницы 

Любой рисунок в форматеДРЕС, СІР или РЫС может быть ис¬ 
пользован как в тексте документа НТМЦ так и в качестве фона веб¬ 
страницы Для этого путь к файлу рисунка присваивается атрибуту 
ВАСКСКОШБ в дескрипторе <ВООУ>, как в следующем примере: 

<ВСЮУ ВАСКСКОІЖ)= 1 ітадез/МуРісСиге . ірд ' > 

Для установки цвета фона страницы используется атри 
бут ВССОЬОВ. Этому атрибуту присваивается значение 
цвета (см. табл. 2.3). 

Следует помнить, что графика в тексте и в фоне документа применя¬ 
ется по-разному. Обозреватель многократно копирует рисунок в фоне 
страницы, заполняя им все окно обозревателя. Не используйте слиш¬ 
ком сложные рисунки в качестве фона, так как многократное повторе¬ 
ние одного и того же изображения затрудняет чтение текста (рис. 2.10). 




Рис. 2.10. Использование рисунков в виде 
фона может испортить \ѴеЪ -стртшцу 

В то же время благодаря многократному повторению фон страни¬ 
цы может быть создан с помощью небольшого исходного изображе- 
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пня. как показано на рис. 2.11. В результате сложны» узор в фоне не 
повлияет на время выгрузки \ѴсЪ-страницы. 


Графический элемент фона 
МеЬ-страницы 


Рис. 2.11. Фон \ѴвЬ - страницы построен из повторяющихся эле¬ 
ментарных рисунков 

Гиперссылки 

Отличительной особенностью \ѴеЬ-страниц в сети Интернет явля¬ 
ется их взаимосвязанность. Если в Интернет уже существует \ѴеЬ- 
страница с полезной для вас информацией, нет необходимости ко¬ 
пировать ее содержимое в новый готовящийся документ. Просто до¬ 
бавьте в текст своей страницы гиперссылку на ресурс, находящийся 
где-либо в Интернет, адрес которого вам известен. 

Ниже показано, как гиперссылка выглядит в коде НТМЬ. 

<А НКЕГ=’: //ѵлм.МуЗіСе. сот/МуРаде. Ъш* ТАКСЕТ^^Ыапк'^Моя 
страница</А> 

Гиперссылка задается парным дескриптором <А>...</А>, а адрес 
страницы, на которую будет осуществляться переход по щелчку на 
гиперссылке, устанавливается как значение атрибута НЕЕР в дескрип¬ 
торе <А>. Чтобы создать гиперссылку на адрес электронной почты, 
атрибуту НЕЕР нужно присвоить значение следующего типа: 

Ъгеі = ' таі ІТо : МуАббгеБвѲМаі 1 Зегѵег' 



&»*•$»< 

: зчмЛМай#* С»»Чгѵ(»Л. 

*** 

Я**>**Р <4 Г&*#*т* 

*Яя*ж*-» ш'ѵмѵітіп іііт* 
** 

я/ф*#*** Цйя ***<*- 

щ*ЖФЖ**пит>> 

3№*а*** 94ж*ттч*і***'.і#тяі. »*»«*» 
+ХФѴХЯП*’:.*: чякіѵкхха>т -яи»«г^*ьЛ»«Лг $пиммѵ* 
іДОф’МИИ*» ИУХКЯК ѴЛ)Л,«ІХ'» Мб» | ' №». 
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Команда та і 11:о запускает на компьютере пользователя приложе¬ 
ние клиента электронной почты, открывает окно нового сообщения и 
вставляет в поле Кому заданный адрес МуАдбгезвѲМаіІЗегѵег. 

С помощью атрибута ТАКСЕТ задается способ открытия документа, 
указанного в гиперссылке. Можно установить следующие значения: 

♦ ’_Ыапк' — в новом окне обозревателя; 

♦ ’_зе11' — в текущей рамке; 

♦ ' _рагегЛ ’ — в рамке предыдущего уровня, если используется 
набор вложенных рамок; 

♦ ’-Іор’ — в рамке верхнего уровня, что соответствует параме¬ 
тру, заданному по умолчанию; 

♦ ’ имя_рамки' — в рамке с указанным именем, заданным в атри¬ 
буте паше. 

♦ если атрибут не установлен (по умолчанию), ссылка открыва¬ 
ется в текущем окне обозревателя. 

Можно создавать ссылки не только на ѴѴеЬ-странипы, но и на не¬ 
которые документы других форматов. Например, можно создать ги¬ 
перссылку на звуковой файл, содержащий музыкальное произведе¬ 
ние, звуковой эффект или сообщение, записанное в файл с помощью 
средств цифровой звукозаписи. Обозреватели поддерживают воспро¬ 
изведение звуковых файлов следующих форматов: 

♦ МЮІ — музыкальные произведения в файлах с расширени¬ 
ем .ті<3; 

♦ МРЗ — музыка, песни и звуковые сообщения в файлах с рас¬ 
ширением .трЗ; 

♦ КеаІАисІіо — интерактивное радио и звукозапись в файлах с рас¬ 
ширением .га; 

♦ \ѴАѴ — звуковые эффекты в файлах с расширением . маѵ. 
Обозреватели поддерживают просмотр видеоклипов таких форматов: 

♦ АѴІ — файлы с расширением . аѵі; 

♦ МРЕС - файлы с расширением .трд или .тред; 

♦ ОиіскТіте — небольшие клипы в файлах с расширением .тоѵ 
или .дЬ. 

В атрибуте ИНЕЕ можно также указать путь к графическому фай¬ 
лу в формате ДРЕС, СІЕ или РІѴС, или к документу в формате РОЕ 




Іаѵа5сгірТ и НТМІ. 


55 


Во всех перечисленных выше примерах при обращении пользователя 
к гиперссылке обозреватель запустит на компьютере пользователя 
специальное приложение для воспроизведения или отображения до¬ 
кумента в окне обозревателя 



Специальные приложения для работы с докуменіами 
мультимедиа являются надстройками обозревателя, т.е. 
они необязательны и могут отсутствовать. В результа¬ 
те мультимедийная гиперссылка может не работать на 
компьютерах некоторых пользователей. 


Разметка \Л/еЬ-страниц 

Чтобы разместить текст, рисунки и другие элементы ШеЪ-страни¬ 
цы соответствующим образом, используются таблицы, рамки и формы. 

Таблицы 

Для создания таблиц применяются пять пар дескрипторов: 

♦ <ТАВЬЕ>...< / ТАВЬЕ> — устанавливают начало и конец таблицы; 

♦ <САРТІОМ>...< /САРТІСДО> — устанавливают заголовок таблицы; 

♦ <ТК>...</ТК> — добавляют новую строку в таблицу; 

♦ <ТН>...</ТН> — добавляют в строку ячейку заголовка; 

♦ <ТЮ>...</ТБ> — добавляют в строку обычную ячейку. 
Обозреватель по умолчанию выравнивает заголовок по ширине 

таблицы и отображает текст в ячейках заголовка полужирным шриф- 

Ѳ том с выравниванием по центру ячейки. Для обычных 
ячеек по умолчанию задается выравнивание полевому 
краю. 

0 0 Пример создания таблицы показан в листинге 2.5. 

Листинг 2.5. Создание таблицы 

<ТАВЬЕ> 

<САРТІ(Ж>Эта таблица создана с использованием<ВВ>дескрипторов 
НТМЬ</САРТІОМ> 

<ТК ><ТН>Фами лия< / ТН ><ТН >Имя< / ТНхТН>Отчество< / ТНхТН>Год 
рождениж / ТН>< / ТК> 

<ТКхТБ>Скворцова< /ТБхТБ>Валентина< / ТВхТБ>Васильевна< / 
ТВхТВ> 197 3< / ТБх / ТК> 
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<ТКхТО>Баранов< / ТБ><ТР>Сергей< / ТБ> < ТР>Анатольевич< / 
ТБхТО>1969</ТБх/ТК> 

<ТКхТО>Миронов< / ТОхТТ)> Гимофейс /ТБхТБ >Максимович< / 
ТБхТР>1980</ТБх/ТК> 

</ТАВЬЕ> 

Внешний вид таблицы в окне обозревателя показан на рис. 2.12. 



Рис. 2.12. Таблица, созданная с помощью дескрипторов НТМІ. 

Установка ширины и высоты таблицы 

Таблицы удобно использовать в тех случаях, когда нужно разме¬ 
стить элементы \ѴеЬ-страницы в определенных областях окна обозре¬ 
вателя. Например, чтобы создать колонку текста заданной ширины, 
достаточно добавить таблицу с единственной ячейкой и установить 
ширину ячейки в пикселях с помощью атрибута ИІІХГН, как в следу¬ 
ющем примере: 

сТАВЬЕ ИШГН='200' хТКхТН> тексте/ТНх/ТКх/ТАВЬЕ> 

В данном примере ширина таблицы установлена в 200 пикселей. 
Но атрибут ѴШУГН позволяет устанавливать ширину таблицы также в 
процентах от ширины окна обозревателя: 
сТАВЬЕ иіаыі= 1 20% 1 ><ТВхТН>текст</ТН></ТК></ТАВЬЕ> 

Атрибут МІІУГН можно устанавливать не только для всей таблицы, 
но и для отдельных ячеек. В следующем примере мы создаем две ко¬ 
лонки текста шириной в 100 и 200 пикселей: 

еТАВЬЕхТКхТН мі<ЗСЪ= * 100 * >текст </ТНхТН НІБТН= ' 200' >текст<I 
ТНх /ТКх /ТАВЬЕ> 

Аналогичным образом высота таблицы и отдельной ячейки уста¬ 
навливается с помощью атрибута НЕІСНТ. 
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Установка атрибута ніотн в одной ячейке таблицы из- 
менит ширину всех остальных ячеек столбца, а установ 
ка атрибута неіснт соответственно изменит высоту всрх 
ячеек строки таблицы. 


Выравнивание текста в таблице 

Выравнивание текста но высоте ячеек можно установить с по¬ 
мощью атрибута УАЦІСИ. По умолчанию текст в ячейке таблицы вы¬ 
равнивается по центру. Атрибуту можно присваивать следующие 
значения: 


♦ Ьор вверх; 

♦ тіййіе — по центру; 

♦ ЪоЬЪот — вниз. 

Для выравнивания текста по горизонтали используется атрибут 
АЫСЫ. Этому атрибуту присваиваются значения ІеЕс, сепсег и 
гідЫ; точно так же. как при выравнивании текста абзаца (см. ли¬ 
стинг 2.1 и рис. 2.4). 



Атрибуты выравнивания текста можно устанавливать 
для строк и для отдельных ячеек, причем установки для 
ячеек таблицы отменяют установки для строк. 


Атрибут АЫШ в дескрипторе <ТАВЬЕ> используется для управ¬ 
ления обтеканием текста страницы вокруг таблицы. Этот прием удоб¬ 
но применять для создания с помощью таблиц панелей элементов 
управления и текстовых выносок. Атрибуту АЫСЫ присваивают сле¬ 
дующие значения: 

♦ 1е€С таблица выравнивается но левому краю окна с обтека¬ 
нием текста справа от таблицы; 

♦ гідЪЬ — таблица выравнивается по правому краю окна с обте¬ 
канием текста слева от таблицы; 

♦ аіі таблица выравнивается по центру окна с обтеканием 
текста справа и слева от таблицы (работает не во всех обозре¬ 
вателях); 

♦ сепЕег таблица выравнивается по центру окна, текст разме¬ 
щается над и под таблицей. 
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На рис. 2.13 показан пример создания панели ссылок и текстовой 
выноски в документе НТМЬ. Код страницы показан в листинге 2.6. 


Рис. 2.13. Установка параметров обтекания текста вокруг 
таблицы для создания панели ссылок и текстовой выноски 

Листинг 2.6. Создание панели ссылок с помощью таблицы 

<нтмь> 

<НЕАБ> 

<ТІТЬЕ>Болезни картофеля</ТПЪЕ> 

</НЕАБ> 

<ВОБУ> 

<Н2>Кольцевая гниль картофеля</Н2> 

<!- создаем таблицу для панели ссылок —> 

сТАВЬЕ ШБТН^'150* ВОВЛЕК^' РЕАМЕ='Ъогйег' ЬШЬЕЗ^'попе’ 

ВССОЬОК=' дгау ’ АЫСЫ= ’ ІеіХ: ' > 

<ТКхТНхНЗ>Болезни< /НЗ >< /ТНх/ТК> 

<ТКхТНхА НКЕР=‘?’>Черная ножка</Ах/ТНх/ТН> 

<ТКхТНхА ШЕР= * ? 1 >Слизистая 6олезнь</Ах/ТНх/ТК> 

<ТКхТНхА НЕЕР= * ? ’ >Кольцевая гниль</Ах/ТНх/ТК> 

<ТКхТНхА НКЕР= 1 ? ’ >Мокрая гниль</Ах/ТНх/ТК> 

</ТАВЪЕ> 

<Р АЫСЫ= 1 зизЕііу 1 >Вследствие медленного течения болезни ...</Р> 
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<!- создаем таблицу для выноски --> 

сТАВЬЕ ИІ6ТН='150' ВОКБЕЕ= * 1' РКАМЕ='Ьогйег' Е0ЬЕБ= , попе' 
ВССОЬОЕ^'уеІІом’ АЕІСК= 1 гідЬе'> 

<ТКхТНхНЗ >Возбудитель< /НЗ >< /ТН>< /ТЕ> 

<ТЕхТЮхНбхі>СогупеЬасІ:егіит 8ерейопісшп</І> - представляет 
собой палочки ...</Нбх/ТОх/ТЕ> 

</ТАВЬЕ> 

<Р АЫШ='эи8І:іСу'>Задержка роста растений и их увядание ...</Р> 
</ВООУ> 

</НТМЪ> 

Добавление границ и фона 

Толщина границ таблицы и ячеек устанавливается в пикселях 
с помощью атрибута ВОЕБЕК в дескрипторе <ТАВЬЕ>. Чтобы скрыть 
границы, атрибуту ВОКОЕК присваивается значение 0. Для выбороч¬ 
ной прорисовки границ таблицы используются атрибуты РКАМЕ и 
КІЛлЕЗ. Выбор границ для показа производится путем присвоения 
этим атрибутам определенных стандартных значений, перечислен¬ 
ных в табл. 2.4. 

Таблица 2.4. Значения атрибутов ркаие и кпьеб для прорисовки 
внешних и внутренних границ таблицы 

Значение Добавляемые границы 

Внешние границы, устанавливаемые атрибутом рнаме 


ѵоісі 

аЬоѵе 

Ьеіом 

гЬе 

ІЬб 

ЬБІйез 

ѵзібез 

Ьогйег 

Нет внешних границ 

Граница по верхнему краю таблицы 

Граница по нижнему краю таблицы 

Граница по правому краю таблицы 

Граница по левому краю таблицы 

Границы по верхнему и нижнему краям таблицы 

Границы по левому и правому краям таблицы 

Все границы (задано по умолчанию) 

Внутренние границы, устанавливаемые атрибутом коьее 

попе 

Нет внутренних границ 

СОІ8 

Границы между столбцами 

ГОѴ7Б 

Границы между строками 

аіі 

Все внутренние границы (задано по умолчанию) 


Атрибут ВССОЬОЕ в дескрипторе <ТАВЬЕ> устанавливает цвет фона 
таблицы (см. табл. 2.3), а в атрибуте ВАСКСКОиш можно указать путь 






60 


Глава 2 


к фоновому рисунку. Оба атрибута можно установить для отдельных 
строк в дескрипторе <тк> или для отдельных ячеек в дескрипторах 

<Т0> и <тн>. 



Резулыат установки фонового рисунка для всей та¬ 
блицы не вполне предсказуем. В одних обозревателях 
фоновый рисунок отобразится без учета границ между 
ячейками, тогда как в других обозревателях рисунок по¬ 
вторится в каждой ячейке. 


В листинге 2.7 показан пример форматирования таблицы. 

Листинг 2.7. Форматирование таблицы 

сТАВЬЕ РЕАМЕ=' Ьзійее 1 ШЬЕЗ^'гоюз' В0Е0ЕК=1> 
<САРТ10№>Пример форматирования таблицы</ САРТІ0Ы> 

<ТК ВССОЬОЕ= 'уеііом' ><ТН>Фамилия</ТНхТН>Имя</ 
ТНхТН>Отчество</ТНхТН>Год рождения</ТНх/ТК> 
<ТЕхТБ>Скворцова< /ТБхТЕ>Валентина< /ТЮхТБ>Васильевна< / 
ТБхТЕ>197 3 < /ТБх /ТК> 

< ТЕ хТБ>Баранов< / ТБхТБ>Сергей< / ТБх'ТС>Анато лье вич< / 
ТБхТБ>19 69< /ТБх /ТК> 

<ТКхТБ>Миронов</ТОхТБ>Тимофей</ТОхТГ>Максимович</ 
ТЛхТБ>19 80< /ТЛ>< /ТК> 

</ТАВЬЕ> 

Результат форматирования показан на рис. 2.14. 



Рис. 2.14. Выбороѵная прорисовка границ 
и установка фона для строки заголовков 
таблицы 
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Объединение ячеек 

Иногда бывает необходимо создать в таблице ячейку такого раз¬ 
мера, ч го она будет занимать несколько столбцов или строк. Это осо¬ 
бенно важно при выполнении разметки макета страницы с помощью 
таблицы. Для объединения ячеек в дескрипторах <ЛТ)> и <ТН> уста¬ 
навливаются с ледующие параметры: 

♦ СОЬЗРАЫ число столбцов, занятых ячейкой: 

♦ К0И5РАК число строк, занятых ячейкой. 

Часто при объединении ячеек разработчики допускают 
ошибку, в результате которой одна из строк таблицы 
оказывается длиннее остальных. Следует помнить, что 
при объединении п строк с помощью атрибута СОЬБРАЫ 
в текущей строке остается на л-1 ячеек меньше, а при 
использовании атрибута комбраи число ячеек сокраща 
ется на 1 в л-1 строках, расположенных ниже текущей. 

ГІример использования объединения ячеек показан в листинге 2.8, 
а внешний вид полученной таблицы на рис. 2.15. 



Рис. 2.15. Объединение ячеек для создания 
подзаголовков внутри таблицы 


Листинг 2.8. Объединение ячеек 

сТАВЬЕ ЕКАМЕ^ЪзісІез киЬЕ5=гомз В0Ы)ЕК=1> 

<ТК ВССОДОК= 'уеііои' ><ТН ЮМ5РАМ=2>К<ВК>п&#47п</ТН><ТН 
С0ЪБРАК=4>Участники соревнования*: /ТН></ТР> 
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<ТК ВССОШК=' уеі Іом' ><ТН>Фамилиж/ТНхТН>Имя</ 
ТН><ТН>Отчество< /ТНхТН>Год рождениж/ТНх/ТК> 

<ТК АЫСЫ= ' сепгег * хТБ>1</ТБ><ТБ>Скворцова</ 
ТПхТО>Валентина</ТОхТО>Васильевна</ТЕхТБ>1973</ТБх/ТК> 

<ТК АЫ(ЗЯ=' сепГег' ><ТВ>2</ТВхТП>Баранов</Т0хТБ>Сергей</ 
ТОхТБ>Анатольевич< /ТО> <ТБ>1969< /ТБх / ТН> 

<ТЕ АЫСѢІ= ' сепЬег ' хТО>3</ТБхТБ>Миронов</ТБхТБ>Тимофей</ 
ТПхТО>Максимович</ ТОхТО>1980< / ТБх / ТЕ> 

</ТАВЬЕ> 

Преимущества и недостатки использования таблиц 

Преимущество использования таблиц для разметки \ѴеЬ-страниц 
состоит в том. что таблица является стандартным базовым элементом 
документа НТМЦ поэтому одинаково хорошо отображается во всех 
обозревателях даже самых старых версий. В то же время разметка до¬ 
кументов требует тщательного планирования размера и структуры 
таблицы. Последующее редактирование больших таблиц на \ѴеЪ-стра- 
ницах может быть затруднено, поскольку элементы таблицы жестко 
взаимосвязаны друг с другом. Так, изменение значений атрибутов 
ИІБТН и НЕІСНТ в одной ячейке влечет за собой автоматическое изме¬ 
нение ширины или высоты всего столбца или строки. 

Еще один недостаток использования таблиц состоит в том, что 
невозможно точно соотнести ячейки таблицы с областями окна обо¬ 
зревателя. Например, если вы создадите нижний колонтитул, то в 
зависимости от разрешения монитора пользователя вані колонтитул 
может как оказаться посередине окна обозревателя, так и скрыться за 
нижним краем окна. 

Рамки 

С помощью пары дескрипторов <РЕАМЕ8ЕТ>...</ЕЕАМЕ5ЕТ> можно 
разделить окно обозревателя на две рамки по горизонтали или по вер¬ 
тикали, причем в каждой рамке будет отображаться своя Ѵ/еЬ-стра- 
ница, независимо от содержимого другой рамки. Технологию рамок 
удобно использовать для разметки окна обозревателя, создания па¬ 
нелей управления и колонти гулов. Прокручивание содержимого или 
смена ШеЬ-страницы в основной рамке не повлияет на внешний вид и 
положение в окне обозревателя вспомогательных рамок с гиперссыл¬ 
ками и средствами навигации но ѴѴеЬ-узлу. 
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Создание структуры рамок 

Ориентация рамок, а также их размер задаются атрибутами К0М2 
и СОЬЗ. В одном дескрипторе <ГКАМЕЗЕТ> может быть установлен 
только один из них — КОИЗ или СОЬЗ. В первом случае окно делится по 
горизонтали, а во втором — но вертикали. Значения атрибутов задают 


высоту верхней и нижней рамок или ширину левой и правоіі рамок 
в процентах от размера окна либо в пикселях. Обычно указывается 
размер только одной рамки, а вместо размера другой рамки ставит¬ 
ся символ звездочки (*). Это означает, что размер рамки будет подо¬ 



бран таким образом, чтобы заполнить всю оставшуюся 
часть окна. 

Чтобы разделить одну из рамок на две дополнитель¬ 
ные рамки, используется структура вложенных набо¬ 
ров рамок, как показано в листинге 2.9. 


Листинг 2.9. Набор рамок 


<нтмь> 


<НЕАО> 

<ТІТЬЕ>Моя страница</ТІТЬЕ> 

</НЕАЭ> 

<РЕАМЕ5ЕТ К0И5='110,*'> 

<РКАМЕ ИАМЕ^’ колонтитул* 5КС='Ъаппег.ЬШ'> 
<РКАМЕ8ЕТ СОЬ8= '30%,* * > 

<РКАМЕ №АМЕ='оглавление' 8РС=' сопСепЪз .ЪСт'> 
<РКАМЕ МАМЕ= 1 главная' 8КС= 1 МуРаде.Ьтш'> 
</РКАМЕЗЕТ> 

</РКАМЕЗЕТ> 

</НТМЬ> 


1. Введите код в текстовом редакторе Блокнот и сохраните в фай¬ 
ле Егате.ЬСш. 

2. Создайте и сохраните в этой же нанке на диске файлы Ьаппег. 
Ы:ш, соп^епСз. йСт и МуРаде. Ы:т, добавив в них абзацы <Р>Ко- 
лонтитул</Р>, <Р>Оглавление</Р> и <Р>Главная</Р>. 

3. Щелкните дважды на файле Іігашев . ЪШ, чтобы открыть его в 
окне обозревателя, как показано на рис. 2.16. 

Имена рамок и файлы источников данных задаются с помощью 
непарного дескриптора <РКАМЕ> и его атрибутов ЫАМЕ и 8КС (см. ли¬ 
стинг 2.9). Имя в атрибуте ЫАМЕ используется для навигации по рам¬ 
кам с помощью гиперссылок (см. следующий подраздел). 
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В значении атрибута бес можно использовать имя фай¬ 
ла источника только в том случае, если файл докумен 
та находится в одной папке с файлом набора рамок 
Если файл источника сохранен в другой папке на диске, 
введите абсолютный путь к файлу ' с : \ \МуИеЬ\Гоіаеі \ 
МуРаде . Лет' , или относительный путь от текущей пап¬ 
ки, напримео ' МуЕоІйег /Му Раде. бСт ' В атрибуте БЕС 
можно также указать сІКЕ -адрес ресурса в Ин эрнет 

Навигация по рамкам с помощью гиперссылок 

Для управления содержимым рамок используются гиперссылки. 
Например, щелчком на гиперссылке в одной рамке можно сменить 
документ в другой рамке или открыть новый документ в окне обозре¬ 
вателя, который заменит собой текущую структуру рамок. Навигация 
по рамкам осуществляется с помощью атрибута ТАКСЕТ в дескрипто¬ 
ре гиперссылки, с которым вы уже познакомились ранее (см. раздел 
«Гиперссылки»). Например, следующая гиперссылка: 

<А НКЕР= ' агСіс1е2.1іШ' ТАЕОЕТ= ’шаіп 1 >Статья 2</А> 
открывает документ агсіс1е2 .Ъип в рамке с именем шаіп. Причем 
сама гиперссылка может находиться в документе НТМІ-, отображае¬ 
мом в любой другой рамке окна обозревателя. 
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Атрибут 5ТѴІ.Е 

Атрибут ЗТУЬЕ отличается от всех других атрибутов НТМЬ. С по¬ 
мощью этого атрибута можно устанавливать одновременно несколь¬ 
ко свойств объекта для его форматирования и позиционирования на 
странице. 

Данный атрибут появился относительно недавно, по- 
ЧВнимание^ этом У не поддерживается некоторыми устаревшими 
/ / обозревателями. 

°о 

Форматирование элементов страницы с помощью 
атрибута 5ТѴІ-Е 

С помощью атрибута ЗТУЬЕ можно отформатировать текст, при¬ 
надлежащий блочным дескрипторам, перечисленным в табл. 2.5. 

Таблица 2.5. Блочные дескрипторы, определяющие фрагменты текста 


Дескриптор Описание 

< вьоскоіюте >... Врезка текста с увеличенными размерами полей 

</ВЬОСК01ЮТЕ> 


<С00Е>...< /ССЮЕ> 
<ОЕЬ>...</ДЕЬ> 

<БІ Ѵ>...< / БІ Ѵ> 

< ЕМ >...</ ЕМ > 

<Н1>...</Н1> —<Н6>...</Н6> 
<ІЫЗ>...</ШЗ> 

<КЕЮ>...< / КВЬ> 

<р>...</р> 

< 0 >...</ 0 > 

< 5АМР >...< / 3 АМР > 
<5РАЫ>...</5РАМ> 

<5ТЮШ>... 

</ЗТЕОЦС> 


Выделяет текст, применяет шрифт Соигіег Ием 

Выделяет текст перечеркиванием 

Выделяет фрагмент текста, содержащий другие 

блочные дескрипторы 

Выделяет текст курсивом 

Заголовки текста 

Выделяет текст подчеркиванием 

Выделяет текст, применяя шрифт Соигіег Ыем 

Текст абзаца 

Выделяет цитату, заключая текст в парные ка¬ 
вычки 

Выделяет текст, применяя шрифт Соигіег 
Выделяет фрагмент текста внутри другого блоч¬ 
ного дескриптора 

Выделяет текст полужирным шрифтом 
Выделяет текст, применяя шрифт О: . . 
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т' Блочные дескрипторы, перечисленные в табл. 2.5, ис¬ 

та заметку ) пользуются для создания как визуальных, так и логиче- 
у ских фрагментов текста. Стандартное форматирование 
О текста выполняется далеко не во всех обозревателях. 
Но с помощью атрибута ЗТУЬЕ можно отформатировать 
требуемым образом текст, заключенный между парой 
соответствующих дескрипторов. 

Для форматирования текста атрибуту ЗТУЬЕ присваивается список 
параметров с определенными значениями, как в следующем примере: 

<Р 8ТУЬЕ= * Еопб-збуіе: ібаііс; ЬаскдгоипсЗ.: #РРЬ700'>Текст 
этого абзаца будет показан курсивом на золотом фоне</Р> 

Список параметров атрибута ЗТУЬЕ заключается в одинарные или 
двойные кавычки. Названия параметров отделяются от значений двое¬ 
точиями, а параметры в списке отделяются символами точки с за¬ 
пятой. Число параметров в списке не ограничено. В данном примере 
текст выбранного абзаца будет показан в окне обозревателя курсивом 
на золотом фоне (рис. 2.17). 



Рис. 2.17. Пример форматирования тек¬ 
ста абзаца с помощью атрибута ЗТУЬЕ 


С атрибутом ЗТУЬЕ для форматирования текста можно использо¬ 
вать следующие параметры: 

♦ Ьаскдгошід — цвет фона фрагмента текста; 

♦ соіог — цвет текста; 

♦ техт-аіідп - выравнивание текста на странице: 

• сепіег — по центру; 
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• ^ивЪіЕу — по ширине страницы; 

• ІеІТ — по левому краю (по умолчанию); 

• гідііс — по правому краю; 

♦ ЪехЪ-йесогаЫоп — прочерчивание линии: 

• попе — нет линий (по умолчанию); 

• ипдегііпе — подчеркивание; 

• Ііпе-ЬЬгоидЬ — перечеркивание; 

• оѵег 1 іпе — линия над текстом; 

♦ ІопС -вСгеСсЬ — интервал: 

• погшаі — обычный шрифт; 

• сопйепзей — сжатый; 

• ехрапйесЗ — разреженный; 

♦ іопЪ-БЪуІе — стиль текста: 

• погшаі - обычный текст; 

• і Па 1 і с и оЫ іцие — курсив; 

♦ іопЬ-ѵгеідЫ: — толщина букв: 

• 100-900 — числовые значения толщины букв; 

• погшаі — обычный шрифт, соответствует значению 400; 

• Ьоій — полужирный шрифт, соответствует значению 7 00; 

♦ Ііпе-ЬеідЫ: междустрочный интервал, задается числом с 
плавающей запятой: 1.0— одинарный; 2.0— двойной и т.д. 

Позиционирование элементов ѴѴеЬ-страницы 

Атрибут ЗТУЬЕ можно использовать для позиционирования эле¬ 
ментов \ѴеЪ-страницы. Рассмотрим пример на рис. 2.18. 

\ѴсЬ-страница содержит текст и рисунки, размещенные в опреде¬ 
ленном порядке. Некоторые рисунки перекрывают друг друга. Такую 
разметку страницы невозможно выполнить с использованием таблиц 
и рамок. Посмотрите, как эта задача выполняется с помощью параме¬ 
тров атрибута ЗТУЬЕ (листинг 2.10). 
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Посетите наш зоопарк 


Рис. 2.18. Позиционирование элементов \ѴеЬ-страницы с помощью атри¬ 
бута БТУЬЕ 


Листинг 2.10. Позиционирование элементов страницы с помощью 
атрибута бтуье 

<нтмь> 

<НЕАБ> 

<ТІТЬЕ>Зоопарк</ТІТЬЕ> 

</НЕАБ> 

<В0БУ> 

<Н1 ЗТУБЕ=’ТехТ-а1ідп: септег; 

ХопТ-иеідЪТ: Ъо1<3' >Посетите наш зоопарк</Н1> 

<Р 5ТУБЕ= 1 ХопТ-зТуІе: ітаііс; розіТіоп: аЬзоІиТе; Тор: 97; 
1еТТ:208; кі<ХтЬ:358; ЪеідЪт:72■>Мы благодарны за 
спонсорскую помощь Обществу ОХОТНИКОВ и рыболовов 
нашего города</Р> 

<ІМС ЗКС^ітадезХАШЬОІ.зРѲ' ЗТУЬЕ= ’розіТіоп: аЬзоІибе; 

Тор: 83; 1еХТ:15; 2 -іпсЗех: 1; ЪогсЭег: тЪіп зоіісі Ыаск’> 
<ІМС 5ЕС=' ітадез\АШЬ02. зрд* $ТУЬЕ='розіТіоп: аЬзоІиТе; 

Тор: 83; 1еХТ:564; 2 -іпдех: 2; ЬогсЗег: ТЬіп зо1і<3 Ыаск'> 
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<ІМС 8КС='ітаде8\АШЬ03.зрд‘ 8ТУЪЕ= 'роБІбіоп: аЪвоІибе; 
бор: 185; 1ебб:305; 2 -іпбех: 3; ЬогсПег: бЪіп боіісі Ыаск* 
мібЫі-"133 " 1іеідЫ:="177">ЕепЬзр; 

<ІМС ЗКС= *ішадее\АШЬ05.зрд' ЗТУЬЕ='роБІбіоп: аЬзоІибе; 

бор: 185; 1е:Еб:443; 2 -іпйех: 4; Ъогйег: бЬіп боіій Ыаск'> 
<ІМС ЗКС='ішадезХАММЬОб.зрд' ЗТУЕЕ- 'роБІбіоп: аЪзоІибе; 

бор: 185; 1еЕб:123; 2 -іпйех: 5; ЪогсЗег: бЬіп зо1і(3 Ыаск'> 
<Р ЗТУЬЕ= ’ЪогсІег: іЬіп (ЗоббесЗ гесі; розібіоп: аЬзоІибе; 
бор: 376; 1ебб:34; місібіі: 682; ЬеідЬ.6 :70' >В нашем зоопарке 
недавно появилась пара белоголовых орлов из Северной 
Америки и семейство бабуинов из Африки. Вы также можете 
полюбоваться на пару птенцов, которые на прошлой неделе 
появились в семье грифов. </Р> 

</ВСЮѴ> 

</нтмь> 

В листинге 2.10 атрибут ЗТУЬЕ используется как для форматиро¬ 
вания текста, так и для позиционирования элементов страницы. На¬ 
пример, заголовок «Посетите наш зоопарк» выравнивается по центру 
страницы и выделяется полужирным шрифтом с помощью параметров 
бехб-аіідп: сепбеги бопб-юеідЪб: Ьо1<3. В следующем абзаце текст 
выводится курсивом с помощью параметра бопб-збуіе : ібаііс. 

Далее мы размещаем рисунки и блоки текста на странице требуе¬ 
мым образом с помощью параметров позиционирования. Прежде 
всего задается тип позиционирования — розібіоп: аЬзоІибе. В на¬ 
шем примере установлено абсолютное позиционирование. Альтерна¬ 
тивным вариантом является относительное позиционирование эле¬ 
ментов ДѴеЪ-страницы: розібіоп: геіабіѵе. Разница между этими 
типами позиционирования состоит в том, что относительный сдвиг 
элемента не влияет на положение других элементов \ѴеЬ-страницы, 
тогда как при абсолютном сдвиге образовавшееся пустое место запол¬ 
няется текстом или другими элементами. 

Сдвиг элемента в определенном направлении относительно ис¬ 
ходной позиции устанавливается в пикселях с помощью параметров 
бор (вверх), Ъоббот (вниз), гідЬб (вправо) и іеіб (влево). При этом 
элементы ШеЬ-страницы могут перекрывать друг друга. Чтобы ука¬ 
зать очередность следования элементов от нижнего к верхнему, ис¬ 
пользуется параметр 2 -іпсІех. Размеры элемента (рисунка или рамки 
текстового фрагмента) устанавливаются в пикселях с помощью па¬ 
раметров ѵ/ісібіл (ширина) и Ьеідбб (высота). Чтобы лучше выделить 
элемент \ѴеЬ-страницы в окне обозревателя, прочертите рамку вокруг 
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него. Отображение рамки устанавливается параметром Ъогйег, за ко¬ 
торым в произвольном порядке следуют три значения, определяющие 
вид рамки: 

♦ толщина рамки: 

• іМп — тонкая; 

• тейіит — средняя; 

• Ыііск — толстая; 

♦ стиль рамки: 

• 80 1 ій — сплошная; 

• йоиЫе — двойная; 

• йог Сей — пунктирная; 

• йаеЪей — штрих-пунктирная; 

• дгооѵе — вдавленная; 

• іпеес и оиСзеС — объемные; 

♦ цвет устанавливается по имени или шестнадцатеричным зна¬ 
чением (см. табл. 2.3). 

Например, в листинге 2.10 вокруг рисунков прочерчены тонкие 
сплошные черные рамки (Ьогйег: Сйіп воіій Ыаск), а послед¬ 
ний абзац на странице очерчен тонкой пунктирной красной рамкой 
(Ъогйег: Ыііп йоССей гей). 

Добавление сценариев в код НТМІ. 

Сценариями называются небольшие программы, предназначенные 
для выполнения определенных операций и функций. Сценарии ис¬ 
пользуются в том случае, если стандартный набор функций обозрева¬ 
телей оказывается недостаточным для правильного отображения ѴѴеЪ- 
страницы. Например, сценарии необходимы при использовании на 
странице форм с элементами управления. Обозреватели отображают 
элементы управления на экране, но пользу они принесут только в том 
случае, если разработчик снабдит их соответствующими функциями. 

Сценарии добавляются непосредственно в код НТМЬ. Обозрева¬ 
тели способны различать программные коды сценариев и выполнять 
их. Стандартным языком сценариев, поддерживаемым большинством 
обозревателей, является ^ѵа$сгірГ. 
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Часто сценарии требуются для выполнения рутинных 
задач, с которыми до вас сталкивались другие разра¬ 
ботчики ѴѴеЬ-страниц. Чтобы не изобретать велосипед 
снова и снова, посетите ѴѴеЬ узлы Мер : /. іаѵазегірг. 
іпСегпеС.сот/, ими. іаѵазсгірТ .сот и иииоаѵаБОгірСе- 
даіоге. сот. 

Здесь вы найдете большую коллекцию готовых кодов 
сценариев на .ІаѵаБсгірІ для решения многих задач. Вам 
останется только скопировать код сценария и прзвиль 
но вставить его в код НТМІ_ 

Добавление сценариев .ІаѵаЗсгірІ 

Для добавления сценария в код НТМЬ используется пара де¬ 
скрипторов <5СКІРТ>...</ЗСКІРТ>. Текст, заключенный между этими 
дескрипторами, рассматривается обозревателем как код программы и 
не отображается на экране. 

Сценарии можно добавлять как в основной раздел \ѴеЬ-страни- 
цы (<ВООУ>...</ВООѴ>), так и в раздел заголовка (<НЕАВ>...</НЕАО>). 
Важно правильно выбрать место сценария в коде НТМТ, посколь¬ 
ку строки кода выполняются обозревателем по мере загрузки \ѴеЪ- 
страницы. В коде сценария не должно быть обращений к элементам 
\ѴеЪ-страницы, которые загружаются позже (т.е. расположены в коде 
НТМТ после кода сценария). Сценарии в разделе заголовка обычно 
используются для определения основных функций, констант и пере¬ 
менных, которые затем могут быть использованы в сценариях основ¬ 
ного раздела. 

Код сценария может храниться в отдельном текстовом файле. 
(Обычно такие файлы сохраняют с расширением . зб.) Чтобы вос¬ 
пользоваться этим кодом, путь к файлу указывают в атрибуте 5КС де¬ 
скриптора <5СКІРТ>: 

сБСКІРТ ЗЕС=' 8Сг ірС 8 ІМуВсгірІ . з 8 * ЬАМШАСЕ=' ДаѵаБсгірС ' ></ 
5СКІРТ> 

В примере установлен еще один атрибут — ЬАМЗІІАСЕ. Для на¬ 
писания сценариев могут использоваться некоторые другие языки 
программирования, например ѴВЗсгірІ. Обозреватель может само¬ 
стоятельно определить язык сценария, но это увеличит время выгруз¬ 
ки страницы. Поэтому язык сценария лучше явно указать в атрибуте 
ЬАШВАСЕ. 
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Сокрытие сценариев 

Устаревшие обозреватели, не поддерживающие дескриптор 
<8СКІРТ>, рассматривают код сценария как обычный текст и отобра¬ 
жают его на экране, что портит МѴеЬ-страііицѵ. и без того утратившую 
часть своей функциональности. Есть очень простой способ предупре¬ 
дить показ кода сценария в окнах всех обозревателей — поместите код 
сценария между командными символами комментариев, как в следу¬ 
ющем примере: 

<5СНІРТ> 

<! — 

код сценария 
//--> 

</8СКІРТ> 


Перед закрывающим символом комментария «-->» 
находятся два символа обратного слеша «//», которые 
необходимы для того, чтобы обозреватель не воспри 
нял командные символы как часть кода сценария. 




Если код сценария сохранен в отдельном файле и до¬ 
бавлен с помощью атрибута ЗКС, то в этом случае код 
никогда не отобразится в окне обозревателя. 


Добавление альтернативного текста 

Еще одна проблема состоит в том, что страницы со сценариями 
утрачивают в устаревших обозревателях часть своей функциональ¬ 
ности и могут работать неправильно. Следует предупредить пользо¬ 
вателей о возможных неполадках в работе \ѴеЪ-страницы. Для этого 
используется альтернативный текст, добавляемый на страницу с по¬ 
мощью дескрипторов <Ш5СКІРТ>...</Ю5СКІРТ>. На странице может 
быть несколько сценариев, но альтернативный текст достаточно до¬ 
бавить один раз в любом месте основного раздела страницы. 

Альтернативный текст сценариев просматривается и ин¬ 
дексируется поисковыми роботами. Это дает возмож¬ 
ность использовать его для описания сценариев, что поз¬ 
волит успешно вести поиск сценариев в Интернет с по¬ 
мощью поисковых роботов. 
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Следует помнить, что альтернативным текст будет по¬ 
казан только в том глучае если обозреватель не под 
держивает выполнение сценариев. Когда ошибка воз¬ 
никает в ходе выполнения сценария, альтерна ивный 
текст нс отображается 


Создание форм 

На \ѴеЬ-страницы можно добавлять элементы управления, кото¬ 
рые обычно используются в диалоговых окнах: командные кнопки, 
флажки, переключатели, текстовые поля, списки и пр. Для добав¬ 
ления этих элементов управления сначала нужно создать форму, 
которой они будут принадлежать. 



На МеЬ-странице может использоваться несколько 
форм с различными наборами элементов управления. 
Может быть создана пустая форма, элементы управле 
ния в которую будут добавляться динамически во время 
использования \Л/еЬ-страницы. Но на странице нельзя 
применять элементы управления без формы. 


Форма создается с помощью пары дескрипторов <РОКМ>...< /РОКМ>. 
Все элементы управления формы находятся в коде НТМЬ между эти¬ 
ми дескрипторами. Для создания элемента управления чаще всего ис¬ 
пользуется непарный дескриптор <ЩРЦТ> с атрибутами, определяю¬ 
щими тип элемента управления. 

Назначение форм состоит в том, чтобы дать возможность посети¬ 
телю управлять содержимым \ѴеЪ-страницы, вызывать на вынолне- 

Ѳ ние сценарии, а также вводить собственные данные и 
отправлять их на \ѴеЬ-сервер или по адресу электрон¬ 
ной почты. 

О 0 Создадим пример формы, введя код листинга 2.11. 

Листинг 2.11. Форма 

<РОКМ> 

<!- Поле ввода —> 

<ВК>Фамилия: 

<ВКхШРІІТ ТУРЕ='Ьехе* ѴАШЕ= ‘Иванов'><БК> 


<!- Группа переключателей --> * 

<ВКхШРОТ ТУРЕ =, габіо’ КАМЕ='со1ог'>Белый 
<ВК><ШРОТ ТУРЕ= 1 габіо ’ МАМЕ“ 1 соіог ’>Красный 
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<ВКхШРит ТУРЕ= , гайіо' №\МЕ='соіог' >Желтый 
<ВКхШРЦТ ТУРЕ= * габіо' ЫАМЕ=' соіог ’ >Зепеный<ВК> 

<!- Группа флажков —> 

<ВКхШР11Т ТУРЕ= * сЬескЬох' №ДОЕ=' СгиіЬ * >Груша 
<ВКхШРит ТУРЕ=' сЬескЬох' ИАМЕ=' ГгиіЬ' >Персик 
<ВКхШРЦТ ТУРЕ=' сЬескЬох' ЫАМЕ= ' ГгиіР ’ >Я6локо<ВЕ> 

<!- Кнопки —> 

<ВЕ><ЩРЧТ ТУРЕ= ' ЬиГЬоп' ѴАШЕ= ’ Пишите мне 1 
ОНСЬІСК=міп<Зом. ореп ( 1 шаіісо:МуАскЗгезБѲтаіІ. ги'); > 
<ВРхШРІІТ ТУРЕ= 'ЬиШоп' ѴАШЕ='Посмотрите мои фотографии' 
ОЫСЫСК=тп(Зом. ореп {’ ЬШр : \ \ \ . Му8і Ре. огд\ ХМуРоГо . ЬРгп'); > 

</РОНМ> 

На рис. 2.19 показано, как созданные элементы управления будут 
выглядеть в окне обозревателя. 


Оімц* 

Оі »■№»** 

С 

ПГур*. 
О ІКаа№ 


яа*< 1,11 ' 1 " 11 ^ 


Рис. 2.19. Элементы управле¬ 
ния формы 

Тип элемента управления устанавливается с помощью атрибута 
ТУРЕ. Давайте рассмотрим по порядку свойства и использование эле¬ 
ментов управления формы, показанных на рис. 2.19. 

Поле ввода 

Поле ввода сІМРШ 1 ТУРЕ=' ЬехЬ ' ѴАШЕ= ' Иванов' > позволяет 
пользователю ввести с клавиатуры одну строку текста. Строка, вве¬ 
денная в поле, автоматически присваивается атрибуту ѴАШЕ этого 
элемента. И наоборот, строка текста, назначенная атрибуту ѴАШЕ 
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в коде НТМ Ь, отобразится в этом поле в окне обозревателя по умол¬ 
чанию (см. рис. 2.19). 

Переключатели и флажки 

Переключатели и флажки используются для того, чтобы предо¬ 
ставить посетителям \ѴеЪ-страницы возможность сделать свой выбор, 
например: выбрать цвет фона страницы или выбрать для просмотра 
одну из нескольких статей или фотографий. Разница между флажка¬ 
ми и переключателями состоит в том, что в группе переключателей 
можно выбрать только один из них. Флажки, принадлежащие одной 
группе, устанавливаются независимо друг от друга. 

Чтобы объединить переключатели или флажки в группу, назначь¬ 
те атрибутам ЫАМЕ этих элементов одно и то же значение. Например, 
в листинге 2.11 всем переключателям присвоено имя соіог, а всем 
флажкам — имя СгиіТ. 

Подпись переключателя или флажка добавляется сразу после за¬ 
крывающей скобки дескриптора <ШРит>: 
сШРІіТ Ьуре=' сЬескЬох 1 паше=' пате 1 >Подпись флажка 

Кнопка 

Кнопки <ШРЦТ ТУРЕ= 1 ЬиЫ:оп 1 > используются для вызова сце¬ 
нариев, присвоенных атрибуту кнопки ОМСЫСК. На кнопке в окне 
обозревателя отображается надпись, присвоенная атрибуту ѴАШЕ. 
Вкратце рассмотрим пример сценариев в листинге 2.11, где создаются 
две кнопки. В обоих случаях атрибуту (ЖСЫСК назначается функция 
кіпдою . ореп (), которая используется для открытия нового окна обо¬ 
зревателя. В первой кнопке в качестве аргумента функции вводится 
строка ’шаіІСо:МуАд(1ге82@шаі1 -ги' : 

«сІИРІЛ 1 ТУРЕ='ЬиССоп 1 ѴАШЕ=‘ Пишите мне' ОНСЫСК=міп<Зом. ореп 
( 'таі1Со:МуАб<1геББ@таі1.ги' ) ;> 

Как и в адресе гиперссылки, команда таіІЪо запускает приложе¬ 
ние клиента электронной почты, открывает окно нового сообщения и 
вводит адрес абонента, указанный после двоеточия. 

Во второй кнопке в аргументе функции ореп .міпсіом указывается 
ІШЬ-адрес ШеЪ-страницы, которая отобразится в новом окне обозре¬ 
вателя после щелчка на кнопке Посмотрите мои фотографии: 

<ПіРЦТ Суре='ЬиСЬоп 1 ѵа1ие= 'Посмотрите мои фотографии' 
опСІіск-иіпйом.ореп{ ЧіССр: \\\\иш?.Му5іСе .огд\\МуРоСо.Ь.Ст') ?> 
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Обратите внимание на то, что ІІРІ_ адрес МеЬ- страницы 
в.аргументе команды ореп.міпсіоѵ; выглядит не совсем 
обычно — в нем вдвое больше слешей. Дело в том, что 
ѳ языке іаѵаБсгірІ слеш (\) является управляющим сим¬ 
волом, который указывает, что следующий за ним сим 
вол является текстом, а не командой — дополнительные 
слеши как раз и используются для отмены управляющих 
символов. Поэтому в текстовом аргументе функции пе¬ 
ред каждым слешем, необходимым в адресе ШІ_, уста¬ 
навливается дополнительный слеш, указывающий, что 
следующий за ним символ является текстом. 




Глава 3 


Использование 
сценариев 
в динамических 
ѴѴеЬ-страницах 

Идея создания мировой сети состояла в том, чтобы предоставить 
возможность свободного обмена информацией между пользователя¬ 
ми во всем мире. Достаточно подготовить документ в формате НТМЬ 
и опубликовать его на \ѴеЬ-сервсре, чтобы любой человек в мире смог 
открыть и прочесть ваш файл. Быть автором публикаций в Интернет 
теперь так же просто, как и быть пользователем Интернет. 

Но статическое представление данных в Интернет быстро ис¬ 
черпало себя. Живой диалог с посетителями ШеЬ-страниц открыва¬ 
ет значительно больше возможностей перед автором для раскрытия 
темы, рекламы товаров и предоставления именно тех услуг, которые 
ждет пользователь. Идея динамически изменяемых ХѴеЬ-страниц, 
внешний вид и содержимое которых может настраиваться самим по¬ 
сетителем, была реализована за счет использования сценариев про¬ 
грамм, загружаемых вместе с \УеЬ-страницей и выполняемых при 
определенных условиях. В этой главе вы познакомитесь с основными 
концепциями создания сценариев и назначения их определенным 
событиям. 


Общие сведения о событиях и функциях 
обработки событий 

Интерактивность \ѴеЬ-стра ниц состоит в том, что в ответ на какое- 
либо действие пользователя происходит изменение внешнего вида 
страницы, отображается дополнительная информация или выпол¬ 
няются другие процессы, облегчающие пользователю работу с до¬ 
кументом. Действия пользователей, в ответ на которые происходит 
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изменение страницы, называются событиями. Чтобы назначить собы¬ 
тию вызов сценария на выполнение, используются атрибуты событий 
элементов ѴѴеЬ-странпцы. В главе 2, в листинге 2.11, мы уже назнача¬ 
ли сценарии событиям щелчка на кнопке формы. Для установки тако¬ 
го события используется атрибут СЖСЫСК, как в следующем примере: 
<ШРІІТ ТУРЕ-'ЬиГТоп' ѴАШЕ= 'Посмотрите мои фотографии' 
ОИСЬІСК^ішЗом.орегН 'ЪССрЛХХХш^.МуЕЩе.огдХХМуРоСо.ЬСгп') ;> 

В данном случае в форме создается кнопка Посмотрите мои фото¬ 
графии, после щелчка на которой выполняется стандартная функция 
^ѵа$сгірІ міпскж. ореп (). В аргументе этой функции указан ІІКЬ 
адрес \ѴеЬ-страницы, которая будет открыта в новом окне обозрева¬ 
теля после того, как пользователь щелкнет на кнопке Посмотрите мои 
фотографии. 

В табл. 3.1 представлены некоторые атрибуты событий, которым 
можно назначать выполнение сценариев. 


Таблица 3.1. События, поддерживаемые элементами ѴѴеЬ-страницы 


Событие 

Описание 

Дескрипторы, 
поддерживающие событие 

омгыск 

Щелчок мышью на эле¬ 
менте 

Большинство дескрипторов 

ОЫРВСІЛСК 

Двойной щелчок мышью на 
элементе 

Большинство дескрипторов 

0Ш01І5Е0ѴЕЕ 

Пользователь наводит ука¬ 
затель мыши на элемент 

Большинство дескрипторов 

ошоизЕоит 

Пользователь убирает ука¬ 
затель мыши с элемента 

Большинство дескрипторов 

ОМРОСІІБ 

Пользователь выбирает 
элемент с помощью клави¬ 
ши <ТэЬ> 

<А>, <АКЕА>, <ЬАВЬЕ>, 

<ШРІІТ>, <5ЕЬЕСТ>, 

<ВиТТОМ>, <ТЕХТАКЕА> 

ошшк 

Элемент теряет выделение 
при следующем нажатии 
клавиши <ТаЬ> 

<А>, <АКЕА>, <ЬАВЬЕ>, 

<ШРЦТ>, <ЗЕЬЕСТ>, 

<ВЬ'ТТОМ>, <ТЕХТАКЕА> 

ОМЗЕЬЕСТ 

Пользователь выделяет 
текст элемента 

<ІМРСТ>, <ТЕХТАНЕА> 

ОЖГНАШЕ 

Пользователь изменяет 

текст элемента 

<ШРОТ>, <5ЕЬЕСТ>, 

<ТЕХТАКЕА> 

(Ж51ШМІТ 

Пользователь щелкнул 
в форме на кнопке Подача 
запроса 

<РОКМ> 







Использование сценариев в динамических ѴѴеЬ-страницах 


79 




Окончание табл. 3.1 

Событие 

Описание 

Дескрипторы, 
поддерживающие событие 

ОШЕЗЕТ 

Пользователь щелкнул 
в форме на кнопке Сбросить 

<РОКМ> 

ОМЬОАО 

ѴѴеЬ-страница загружается 
в окно обозревателя или 
в рамку 

<ВСЮѴ>, <РКАМЕ5ЕТ>, <РКАМЕ> 

ОЫШЬОАО 

\Л/еЬ страница замещается 
другой страницей в окне 
обозревателя или в рамке 

<ВСЮУ>, <РКАМЕ5ЕТ>, <ГКАМЕ> 


Именование элементов ѴѴеЬ-страницы 

Для любого элемента \ѴеЪ страницы можно задать уникальное 
имя, присвоив его атрибуту Ю и/или НАМЕ, 



Если вы предполагаете обращаться к элементу ѴѴеЬ- 
страницы в сценариях, установите одно и то же имя для 
обоих атрибутов — ід и МАМР Эти атрибуте частично 
дублируют друг друга а их использование в разных 
обозревателях не в полной мере стандартизировано, 
поэтому лучше подстраховаться. 


Например, в следующем примере мы присваиваем элементу ос¬ 
новного раздела страницы имя Ьоау 
<ВСЮУ ІБ^Ъойу' КАМЕ 'Ьойу'> 

Смысл именования элементов состоит в том что разработчик по¬ 
лучает возможность в сценариях обращаться к элементам \ѴеЪ стра 
ницы по имени и динамически изменять их атрибуты. Например, 
после того как мы присвоили разделу сНСПУ • имя, в коде сценария 
можно установить или изменить цвет фона страницы, исполь.,уя еле 
дующую команду: 
иіпйои .Ъойу.ЬдСо1ог='гей' 

Эту команду можно присвоить атрибуту события, например собы¬ 
тию СЖСЫСК кнопки формы. 



ѴѴеЬ-страницу можно представить как контейнер . содер¬ 
жащий элементы страницы, которые, в свою очередь, 
являются контейнерами атрибутов Иерархия контеинс 
ров записывается слева направо, и имена контейнеров 
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разделяются точками Для обращения к объекту ѴѴеЬ 
страницы в сценарии используется ключевое слово 
ыіпсЗои. Далее следуюі имя элемента и имя атрибута. 
(См. также основе' объектно-ориентированного прог¬ 
раммирования в главе 1.) 

Создание пользовательских функций 

В сценариях часто бывает необходимо выполнить не одну, а мно¬ 
го команд. В таком случае удобно создавать и применять пользова¬ 
тельские функции. Пользовательские функции создаются с помощью 
ключевого слова СипсЫоп следующим образом: 

<5СЕ IРТ ЫШСІІАСЕ= 1 ДаѵаЗсг ірЬ 1 > 

ЕипсТіоп ИмяФункции(список аргументов) { 
код функции 
}; 

др . функции ... 

</5СКІРТ> 

Определения функций всегда отделяются от остального кода 
\ѴеЪ-страницы с помощью пары дескрипторов сценария <5СКІРТ>... 
</5СКІРТ>. Сценарий может содержать определения многих функ¬ 
ций, а также выполняемые команды и стандартные функции языка 
ДаѵаЗсгірІ. В свою очередь ѴѴеЪ-страница может содержать несколько 
сценариев в основном разделе и в разделе заголовка (см. главу 2). 

Сценарии выполняются во время загрузки ѴѴеЬ-стра 
ницы в той очередности, в которой они находятся в 
коде НТМ1_ Но если команды и стандартные функции 
.Іаѵа5сгір{ в сценариях выполняются автоматически, то 
последовательности команд функций сохраняются в 
оперативной памяти компьютера под именем функции 
и выполняются только в том случае, если функция была 
вызвана на выполнение 

За ключевым словом НшсЕ іоп следует имя функции. Имя функ¬ 
ции должно быть уникальным для данной \УеЬ-страницы. Если в те¬ 
кущем или следующем сценарии на \ѴеЬ-етранице будет определена 
другая функция с таким же именем, то прежняя функция будет за¬ 
мещена новой. 

Имя функции завершается парой скобок, между которыми нахо¬ 
дится список аргументов функции. Список аргументов может быть 
пустым «()». или содержать имена аргументов, используемых в дан- 
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ной функции: ИмяФункцим (а, Ь, с, ...). В соответствии с синтак¬ 
сисом ^ѵаЗсгірі код функции заключается в фигурные скобки {...}, 
а каждая строка кода должна завершаться символом точки с за¬ 
пятой «;». 

После того как функция была определена, ее можно вызвать на 
выполнение в коде сценария следующим образом: 

ИмяФункции(список аргументов); 

Число аргументов в вызове функции должно соответ¬ 
ствовать числу аргументов в определении функции 


Чаще всего функции используют для обработки событии, выпол¬ 
няемых над документом НТМВ или его элементами. Функция, назна¬ 
ченная атрибуту события, называется функцией обработки события 
При использовании гиперссылок функции могут назначаться как 
атрибутам событий, так и непосредственно ШЕР. Но при этом исполь¬ 
зуется особый синтаксис назначения функции с помощью ключевого 
слова іаѵавсгірг: 

<А ЬгеЕ=' заѵавсгірг :(ЗеЕ_ 2 Іюѵ?{ ) ' >Текст гиперссылки</А> 

В этом случае текст будет выглядеть как обычная гиперссылка, но 
функционировать как кнопка формы. 

Если вы хотите, чтобы во время щелчка на гиперссылке 
одновременно с открытием новой страницы выполни 
лась какая-нибудь дополнительная функция, назначь¬ 
те эту функцию событию (ЖСЫСК данной гиперссылки. 

Пользовательские функции можно вызывать непосредственно из 
кода сценария, как и стандартные функции ^ѵаЗсгірС. 





Вызов в коде сценария функции, определение которой 
находится ниже в коде НТМІ_, приведет к ошибке. 


Функции в сценариях используют для достижения следующих 
двух наиболее общих целей: 


♦ для динамического добавления или удаления элементов \ѴеЪ- 
страницы, либо изменения их свойств; 
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♦ для выполнения вычислений и возвращения результата по ме¬ 
сту вызова функции. 

Для возвращения полученного значения в функции используется 
команда геЬигп. Например, ниже показана функция для вычисления 
суммы двух чисел: 
ііипссіоп 8ит(а, Ь) { 
геЬигп (а + Ь); 

} 

В этой главе мы рассмотрим применение функций для динамиче¬ 
ского редактирования \ѴеЪ-страниц, а с вычислениями в сценариях 
ознакомимся в главе 4. 

Добавление и изменение текста 
ѴѴеЬ-страницы с помощью сценариев 

Поскольку основным содержимым \ѴеЬ-страниц обычно является 
текст, прежде всего рассмотрим примеры динамического ввода и ре¬ 
дактирования текста \ѴеЬ-страниц с помощью сценариев ^ѵаЗсгірІ. 
Сначала познакомимся с общими принципами динамического редак¬ 
тирования текста, а затем рассмотрим несколько примеров, которые 
могут пригодиться на практике. 

Динамическое редактирование блочных 
элементов ѴЛ/еЬ-страницы 

С помощью функций можно также изменять или возвращать со¬ 
держимое блочных элементов \ѴеЪ-страницы . Для этого использу¬ 
ются атрибуты іппегТехГ и іппегНТМЬ. Чтобы понять смысл этих 
атрибутов, рассмотрим два следующих примера абзацев текста, кото¬ 
рые на \ѴеЬ-странице будут выглядеть совершенно одинаково: 
<Р>Текст абзаца</Р> 

<Р іппегТехЬ=' Текст абзаца’></Р> 

Таким образом, атрибут содержит весь текст блочного элемен¬ 
та, в данном случае абзаца. Атрибут іппегНТМЬ отличается тем, что 
содержит не только текст, но и другие дескрипторы НТМЦ та¬ 
кие, как дескрипторы форматирования и вложенные блочные 
элементы. Рассмотрим примеры динамического изменения текста 
\УеЪ-страницы. 
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Ввод текста непосредственно на ѴѴеЬ-странице 

Обозреватели предназначены для просмотра, но не для редакти¬ 
рования \ѴеЪ-страниц. Как правило, посетитель \УеЬ-страницы может 
только читать текст, но не изменять его, за исключением текстовых 
полей форм, о которых мы поговорим подробнее в главе 7. Тем не ме¬ 
нее \ѴеЬ-страницу можно снабдить сценариями, которые дадут воз¬ 
можность пользователю изменять текст документа. Эта возможность 
может пригодиться, например, при создании развлекательных игро¬ 
вых \ѴеЬ-страниц. Правда, и в этом случае не удастся 
Пример ) обой гись без элементов управления форм. 

' Введите в текстовом редакторе код ѴѴеЬ-страницы. 
показанный в листинге 3.1. 



Листинг 3.1. Ввод текста на ѴѴеЬ-страницу 

<ВОБУ> 

<ГОКМ> 

<ІЫРПТ ТУРЕ=СехС Ю=СхС_{іе1<Э ИАМЕ=і:хі:_1іе1сЗ 5І2Е=50хВК> 
<ШРІІТ ТУРЕ=ЬиЫ:оп ѴАШЕ=*Ввести текст' 

ОЫСЫСК= " іпзегС_1:ехС (СхС_1іе1й.ѵа1ие) "> 

</РОКМ> 

<Р Ю^раг ЫАМЕ=рагх/Р> 

<БСНІРТ> 

^ипсЬіоп іпзегІ:_1;ехІ: (ЬехЬ) { 
раг. іппѳгТехС-Ьехі :; 

} 

</5СКІРТ> 

</ВОБУ> 

\ѴеЬ-страница содержит форму с текстовым полем пхС_^іе1(і и 
кнопкой Ввести текст. Событию СЖСІЛСК этой кнопки назначено вы¬ 
полнение пользовательской функции іп5егг._сехг:, определенной 
ниже в разделе сценария. В функцию обработки события передает¬ 
ся один аргумент — текущее значение текстового поля гхг_ііе1й. 
ѵаіие. \ѴеЪ-страница также содержит пустой именованный абзац: 
<Р ІБ=раг ЫАМЕ=рагх/Р>. Функция іпзегСЛехГ вставляет пере¬ 
данный ей текст в абзац: раг. іппегТех*:={;ехІ:; . Результат показан 
на рис. 3.1. 
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Рис. 3.1. Текст из поля был вставлен 
на И г еЬ-страницу щелчком на кноп¬ 
ке Ввести текст 


Всплывающий текст 

Освоив принципы динамического ввода и редактирования текста 
\ѴеЬ-страницы, приступим к созданию всплывающих подсказок и 
определений. В Тексте страницы могут встречаться термины или упо¬ 
минаться события, требующие кратких пояснений. Многочисленные 
пояснения и определения сделают текст \ѴеЪ-стран и цы слишком 
длинным и отвлекут от основной идеи. Воспользуйтесь навыками 
программирования на ДаѵаЗсгірІ, ч гобы решить эту проблему. Давайте 
создадим в тексте всплывающие определения. Предположим, что 
у нас на странице есть текст: «Чтобы добавить цифровую подпись 
к документам, передаваемым с вашего компьютера, щелкните здесь 
для загрузки и установки цифрового сертификата». 
Г Пример ) Теперь добавим к этому тексту определение термина 
цифровая подпись. 

Введите в текстовом редакторе код листинга 3.2. 

Листинг 3.2. Добавление всплывающего текста 


<ВОБУ> 

<Р> Чтобы добавить <А ГОЕР^' заѵазсгірС :<Зе€_з1іом( ) ' >Цифровую 
подпись</А>&пЬзр<ЗРАК '<3е^_гехг ' ЫАМЕ= ’<ЗеГ_сехС' 

8ТУЬЕ=' соіог : ге<3 ' ОИСЬІСК=йеі:_тоѵе {); ></ЗРАК>&пЬзр к 
документам, передаваемым с вашего компьютера, щелкните здесь 
для загрузки и установки цифрового сертификата.</Р> 


<5СКІРТ> 

іипсгіоп сЗеі_з1іом() { 
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(ЗеР_бех1:. іппегТехІ:= " (Цифровая подпись: шифрованная 
электронная подпись, подтверждающая подлинность документа. 
Наличие цифровой Аедписи подтверждает, что документ был 
получен от владельца подписи и не был изменен.)’'; 

} ; 


Сипссіоп беі_гпоѵе{){ 
йеР^Гехб. іппегТехІ:= " "; 

}; 

</8СКІРТ> 

</ВООУ> 

Сохраните документ в формате НТМЬ и дважды щелкните на 
имени файла в окне Мой компьютер, чтобы открыть файл г помощью 
обозревателя. Текст отобразится в окне обозревателя, как показано 
на рис. 3.2. Щелкните на словах « цифровую подпись », отформатиро¬ 
ванных как гиперссылка. В текст абзаца будет добавлено определение 
термина «цифровая подпись », как показано на рис. 3.3. Текст опреде¬ 
ления взят в скобки и выделен красным цветом (цвет текста задан 
в дескрипторе <8РА№> с помощью атрибута 8ТУЬГ). Щелкните на тек¬ 
сте определения, чтобы убрать его с экрана и восстановить текст в том 
виде, в каком он был показан на рис. 3.2. 



Рис. 3-2. Щелкните на выделенном терми¬ 
не, чтобы добавить его определение 


В коде листинга 3.2, в отличие от листинга 3.1, вместо пустого аб¬ 
заца используется пустой фрагмент текста, заданный дескрипторами 
<8РАК>...</5РАЫ>. Эти дескрипторы используются для того, чтобы до¬ 
бавляемый текст появился внутри текущего абзаца. 
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Рис. 3.3. После того как пользователь про¬ 
читает определение термина, он сможет 
удалить определение, щелкнув на его тексте 


Обратите внимание: такой же подход может быть применен как 
для добавления текста на \ѴеЬ-страницу, так и для удаления текста 
из нее. Щелчок на тексте определения вызывает функцию де Е_тоѵе, 
которая присваивает динамически изменяемому фрагменту текста 
пустую строку: деі_ЬехІ: . іппегТехГ= "". 

Меню гиперссылок 

Если у вас на странице много гиперссылок, то для экономии места 
на странице и облегчения поиска нужной ссылки можно сгруппи¬ 
ровать их по категориям и добавить на страницу список категорий. 
Когда пользователь подводит указатель мыши к заголовку категории, 
открывается вложенный список гиперссылок, относящихся к этой 
категории, как показано на рис. 3.4. Если пользователь перемещает 



Рис. 3-4. Всплывающее меню гиперссылок 
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указатель на другой заголовок категории, список ссы¬ 
лок предыдущей категории сворачивается, а под заго¬ 
ловком категории возникает новый список. 

Введите в основной раздел страницы код листинга 3.3. 


Листинг 3.3. Всплывающие списки гиперссылок 

<РОРМхБІѴ 8ТУЬЕ=*со1ог: Ыие; ТехТ-десогаСіоп: ипбег1іпе’> 
<Р 0Ш0и5Е0ѴЕК=П()>Группа 1</Р> 

<ІЛЬ ІБ= ' дгоир_1 ’ ЫАМЕ=' дгоир_1' ></ІДі> 

<Р 0Ш01І8Е0ѴЕК=І2 {) >Группа 2</Р> 

<ЦЬ Ю= ' дгоир_2 ' №МЕ= ' дгоир_2' >< /Х)Ъ> 

<Р 0ЫМ003Е0ѴЕК=О<)>Группа 3</Р> 

<ІІЬ ІБ= ' дгоир_3 ' ЫАМЕ= ' дгоир_3' х/ЦЬ> 

</БІѴх/РОКМ> 


<8СЕІРТ> 

^ипсЫоп ^1() { 
міпбоѵ?. дгоир„2. іппегНТМЬ= " " 
міпбоѵ7.дгоир_3 . іппегНТМЬ="" 

кіпсіом. дгоир_1. іппегНТМЕ= " <Ы 0Ш0и8Е0ѴЕК=оп_5е1есЕ 
(' агЫ. ЬРт 1 } >Статья 1</ЫхЫ 0Ш0ШЕ0ѴЕК=оп_8е1есІ; 
('агтг.ЬЕт* )>Статья 2</ЫхЫ ОШОі;ЗЕОѴЕК=оп_8е1ес1: 
('агТЗ .ЬРш') >Статья 3</Ы>" 

>; 


ііипсЬіоп Е2(){ 

иіпбом.дгоир_1.іппегНТМЬ="" 
міпбоѵ?. дгоир_3. іппегНТМЬ="" 

иіпскж. дгоир_2. іппегНТМЬ- " <Ы 0Ш01ІЗЕ0ѴЕК=оп__зе1есЕ 
('агЕ4 .ЬЕт* } >Статья 4</ЫхЫ опМоиБе0ѵег=оп_зе1есі: 
('аг Е 5. ЬЬт ') >Статья 5</Ы>" 


іипсЕіоп Е3(){ 
ѵгіпбоѵ?. дгоир_1. іппегНТМЬ="" 
міпбом. дгоир_2 . іппегНТМ1_,="" 

ѵ?іпбом. дгоир_3 . ігшегНТМЬ^ "<Ы ОШОи8ЕОѴЕК=оп_8е1есІ: 
{’агсб.Ьип')>Статья 6</Ы>" 

}; 


^ипсЕіоп оп_8е1 ест{паше) { 
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ьор.таіп. Іосасіоп.геріасе(пате) ; 

}; 

</5СКІРТ> 

Давайте шаг за шагом разберем предложенный код НТМП Снача¬ 
ла создаются заголовки меню верхнего уровня Группа 1 Группа 3, 
каждый в своем абзаце с установленными функциями обработки со¬ 
бытий 0Ш01І8Е0ѴЕК. За заголовками следуют объекты пустого мар¬ 
кированного списка с уникальным именем: <ІІЬ Ю=' дгоир_# * ЫАМЕ= 
= ’ дгоир__1' ></иь>. Программа работает следующим образом. 

1. Пользователь наводит указатель мыши на заголовок группы. 
При зтом происходит событие 0Ш005Е0ѴЕК, вызывающее на 
выполнение соответствующую функцию. 

2. В первых строках функция обработки события обнуляет спи¬ 
ски ссылок других категорий, присваивая пустые строки атри¬ 
бутам іппегНТМЬ соответствующих маркированных списков. 

3. В третьей строке функция создает список ссылок под выбран¬ 
ной категорией, присвоив НТМИ-код списка атрибуту іппег¬ 
НТМЬ соответствующего маркированного списка. 



Панель навигации Основная рамка таіп 
Рис. 3.5. Использование всплывающего меню в панели навигации 
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4. При наведении указателя мыши на пункт всплывающего меню 
в основной рамке окна обозревателя отображается текст новой 
\ѴеЪ-страницы. 

Такое раскрывающееся меню удобно разместить в панели навига¬ 
ции, как показано на рис. 3.5. 

В окне обозревателя пункты меню выглядят как гиперссылки, но 
в действительности они таковыми не являются. Цвет и подчерки¬ 
вание заданы параметрами атрибута ЗТУЬЕ в блочном дескрипто¬ 
ре <ОІѴ>. Активность пунктов меню обеспечивается функцией оп_ 
ееіесг, которая назначена соответствующим событиям 0Ш008Е0ѴЕЕ. 
Эта функция открывает новую \ѴеЬ-страницу в рамке гпаіп. (Более 
подробно об открытии ѴѴеЬ-страниц в окне обозревателя с помощью 
сценариев см. в главе 6.) 

Ввод и редактирование кода НТМІ. 
с помощью сценариев 

В главе 2 вы ознакомились с кодом НТМЬ и узнали, как создавать 
\ѴеЬ-страницы в текстовом редакторе с чистого листа. В предыдущих 
разделах этой главы указывалось, что элементы \ѴеЪ-страницы, соз¬ 
данные с использованием дескрипторов НТМЦ могут быть измене¬ 
ны динамически уже после открытия Ѵ/еЪ-страницы с помощью сце¬ 
нариев. В этом разделе речь пойдет о динамическом создании кода 
НТМЬ посредством сценариев, т.е. о создании новых ШеЬ-страниц по 
требованию пользователей. 

Функция ѵѵгііе 

Функция ѵѵгіГе языка ^ѵаЗегірі используется для динамического 
ввода текста и дескрипторов НТМЬ в окно обозревателя. Синтаксис 
использования этой функции следующий: 
сіосшпепг . иг ісе (" текст") 

Прежде всего нужно указать документ, в котором следует ввести 
новый текст. Ключевое слово йоситепс соответствует текущему окну 
обозревателя. Если текст вводится в определенную рамку или в дру¬ 
гое окно обозревателя, то перед словом (Зосштюпі необходимо указать 
имя рамки или окна: 
шаіп .доситепе .игіГе (" текст ’) 

НемѴ/іп.сЗосишепІ: .нгіге ("текст*) 
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Аргументом функции может быть строка текста, число или вызов 
функции ^аѵаЗсгірі (стандартной или пользовательской), возвраща¬ 
ющей текстовое или числовое значение. Каждая последующая функ¬ 
ция адгібе вводит текст, вслед за текстом, добавленным предыдущей 
функцией. Чтобы создать новый абзац, используйте в строке текста 
дескрипторы НТМЕ 

босшіепб .кгібе {"<Р>Первый абзаце/Р>") 
босшпепб .игібе ("<Р>Второй абзац</Р>*) 

или одну команду: 

боситепЬ .мгібе ("<Р>Первый абзаце/РхР>Второй абзаце/Р>") 

В строке функции игібе можно использовать любые дескрипто¬ 
ры как для форматирования текста, так и для создания таблиц, форм, 
списков и других элементов \ѴеЪ-страницы. 

Функции мгіхе можно передать несколько аргументов, разделив 
их запятыми. Функция автоматически объединит строки текста, пе¬ 
реданные в аріу ментах, и выведет суммарную строку в окне обозре¬ 
вателя. Это свойство удобно использовать для включения в текст ре¬ 
зультатов выполнения пользовательских функций, как в следующем 
примере: 

МіпСи1с.боситепб.мгібе( "<Р>Сумма налога за автомобиль составит", 
си1с_Ьах(саг_буре.ѵа1ие,уеаг.ѵа1ие) ," рублей</Р>") 

Данная функция выводит строку с указанием суммы налога за 
автомобиль. Предположим, что на \ѴеЪ-странице есть форма с дву¬ 
мя полями Тип автомобиля и Год выпуска, которым присвоены име¬ 
на саг_Хуре и уеаг соответственно. Вам не составит труда создать 
такую форму самостоятельно. В \ѴеЪ-странице также есть сценарий 
с определением функции си1с_бах, которая возвращает значение, 
рассчитанное по данным из полей формы. (Использование сценариев 
для вычислений рассматривается в главе 4.) Функция игібе выво¬ 
дит результат вычислений с сопровождающим текстом одним абза¬ 
цем в новое окно обозревателя с именем МіпСиІс. (.Подробно об от¬ 
крытии новых окон обозревателя из кода сценария рассказывается 
в главе 6.) 

Очень важно правильно выбрать место функции игібе в сценарии 
на \ѴеЪ-странице, чтобы получить требуемый результат. Если функ¬ 
ция босшпепб. мгіЬе используется в сценарии, то строки текста будут 
добавляться за элементами \ѴеЬ-страницы, созданными ранее в коде 
НТМЬ. Функцию игібе также можно применять внутри пользова- 
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тельских функций обработки событий. Обычно в этом случае функ¬ 
ция нг іСе применяется для заполнения текстом определенных рамок 
или окон обозревателя. 




При использовании шгісе в функции обработки собы¬ 
тия следует учесть одну важную особенность обозрева¬ 
теля ЫеІ5саре Маѵідаіог. Текст, добавленный в уже от¬ 
крытое окно обозревателя или рамку, появится только 
после перезагрузки содержимого ѴѴеЬ-страницы. В ко¬ 
де іаѵаБсгір! для перезагрузки содержимого окна или 
рамки используется команда имя_окна/рамки . ІосаСіоп. 
геІоасЦ ). Эта команда не помешает выполнению сце 
нария в Іпіегпеі Ехріогег. 

Давайте рассмотрим использование функции шгіЬе 
на примере листинга 3.4. 


Листинг 3.4. Ввод текста ѴѴеЬ-страницы с помощью функции кгіъе 


<нтмь> 

<НЕАБ> 

<ТІТЬЕ>Функция мгіЬе</ТІТЬЕ> 

<5СКІРТ> 

ЕипсСіоп іприСІО { 

йоситепТ .мгіСе("<Р>Ввод текста с помощью 
пользовательской функции .</Р>■); 

} 

ТипсЬіоп іприС2() { 

міп2 = &7Іп<Зом.ореп(*", "оиЬриЕ ", "иі<Зиі=400,ЬеідЫ:=200") ; 
міп2.гіоеитепС.шгіСе("<Р>Ввод текста в новое окно</Р>"); 
міп2.ІосаСіоп.геіоай(>; 

} 

</5СКІРТ> 

</НЕАБ> 

<ВСЮУ> 

<8СНІРТ> 

(ЗосишепТ .шгіСе {"<Р>Ввод текста из кода сценария .</Р>") 
іприСІ() * 

йосишепі.игіі:е("<ЕОРМхІКРит ТУРЕ=ЪиС1:оп ѴАШЕ= 1 Вывести текст 
в новое окно' 0ЫСЫСК=іприс2 () ></РОНМ>") 

</8СЕІРТ> 

</ВСЮУ> 

</нтмь> 
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Заметьте, что раздел <ВОБУ> содержит только код сценария, кото¬ 
рый создает все элементы \ѴеЬ-страницы. Первая строка сценария до¬ 
бавляет текст «Ввод текста из кода сценария». Затем следует вызов 
функции іприсі, определенной в коде сценария в разделе заголовка. 
Несмотря на то что команда мгіСе в этой функции записана в коде 
\ѴеЬ-сграницы еще в разделе заголовка, на выполнение эта функция 
вызывается только сейчас Поэтому текст «Ввод текста с помощью 
пользовательской функции» появится во втором абзаце в окне обо¬ 
зревателя. Затем, опять таки с помощью функции ыгіСе создается 
форма и командная кнопка Вывести текст в новое окно. Щелчок на 
этой кнопке запускает на выполнение функцию іприС2, которая 
открывает новое окно обозревателя и вводит в него строку текста. 
(Более подробно об управлении окнами обозревателя рассказывается 
в главе 6.) 

Результат выполнения листинга 3.4 показан на рис. 3.6. 



ф - 0 Гж г 1 ***”»* # 

; ■ ѴЙѴ-МТ* Л ** » 

т'гкѵ'г* »ѴіДлг.^*иг}>я* 


ѢО'-а С ГѴ'ЖМЯМѴ ІУИПЧ МІГЯя/аКЫІ фуяъяив 

[ к шіг, ^ ^ 



Рис. 3-6. Использование функции іѵгіСе для ввода данных 
в текущий документ и в новое окно обозревателя 


Динамическое редактирование ѴѴеЬ-страницы 

Поскольку функцию мгіее удобно использовать для последова¬ 
тельного ввода текста и других элементов на ДѴеЬ-страницу, этот при¬ 
ем чаще используется для динамического создания новых докумен¬ 
тов в окнах и рамках. Для произвольного доступа к элементам теку- 
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щей \ѴеЬ-с границы лучше использовать другие подходы. Так. язык 
}аѵа8спрі позволяет создавать объекты любых элементов \ѴеЬ-стра- 
ницы, вставлять их в определепіюй позиции в текущем документе 
и динамически изменять в ходе работы с Ѵ/еЬ-страницей. 


Создание объектов элементов И /еЬ-страницы 

Для создания объектов \ѴеЪ-страницы используется функция 
сгеаСеЕІепіепс. Синтаксис этой функции очень простой: в аргументе 
указывается дескриптор 1ІТМТ соответствующего объекта в кавыч¬ 
ках, но без угловых скобок <...>. Например: 

♦ боситепС. сгеаСеЕІетепС (* Р *) — создает новый абзац, анало¬ 
гичен <Рх/Р>; 

♦ босіітепС . сгеасеЕІетепС ( 1 ТАВЬЕ ’) — создает новую табли¬ 
цу, аналогичен <ТАВЬЕ>< /ТАВЬЕ>; 


♦ босшпепС. сгеасеЕІетепС (’ТБ 1 ) создает новую ячейку та¬ 
блицы, аналогичен <ТБх/ТБ>, и т.д. 



Команда сгеасеЕІетепС создает новый объект в опе¬ 
ративной памяти компьютера. Теперь этот объект мож¬ 
но добавить в определенное место на ѴѴеЬ-странице. 
Для примера в листинге 3.5 создается новый абзац 
текста. 


Листинг 3.5. Динамическое создание и добавление объектов 
ѴѴеЬ-страницы 

<ВОБУ> 

<ОІѴ ІБ=Чад' ЫАМЕ- Чад 'х/БІѴ> 

<5СКІРТ> 

раг = босшіепС. сгеасеЕІетепС (" Р") ; 
раг.іппегТехС = "Текст абзаца"; 

Сад . аррепбСЫ 16 (раг} ; 

</5СКІРТ> 

</ВОБУ> 

При загрузке \ѴеЬ-страпицы с помощью дескрилтора <БІѴ ІБ= 
*' Сад ' БАМЕ " ' Сад ' > создается пустой именованный раздел, после че¬ 
го выполняется код сценария. В сценарии создается новый объект аб¬ 
заца иод именем раг, которому присваивается текст: раг. іппегТехС 
■ Текст абзаца"; . Итак, абзац уже содержит текст, но его еще нет на 
странице. В следующей строке нроі рам мы абзац добавляется в раздел 
Сад с помощью команды Сад. аррепбСЫ 16 {раг} В данном случае 
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команда аррепйСЪі Ій добавляет дочерний объект в родительский 
блочный объект. Эта команда применима ко всем объектам, однако 
необходимо учитывать логику отношений дочерних и родительских 
объектов. Объект абзаца не может быть дочерним но отношению к 
объекту другого абзаца, а объект ячейки таблицы может быть дочер¬ 
ним по отношению к объекту строки таблицы, но не самой таблицы. 
При работе с таблицами, списками и некоторыми другими объектами 
помимо общей команды аррепйСЬі Ій можно использовать специаль¬ 
ные команды, которые мы рассмотрим в следующих подразделах. 


Динамическое редактирование таблиц 

Для добавления строк и ячеек к таблице в ^ѵаЗсгірІ применяют¬ 
ся специальные функции: іпБегСКом (номер_строки) и іпзегГСеІІ 
( номер_ячейки ). Удобство использования этих функций состо¬ 
ит в том, что они позволяют добавлять строки и ячей¬ 
ки в определенном месте таблицы. 

Предположим, нам необходимо иметь возможность 
добавлять в таблицу на \ѴеЬ-странице новые записи 
с помощью полей формы, как показано на рис. 3.7. 
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Рис. 3.7. Добавление записей в таблицу с помощью 
текстовых полей и кнопки 


Вам не составит труда создать подобную форму самостоятельно. 
За формой в коде НТМЬ была создана таблица под именем саЫе со 
строкой заголовков, а кнопке Добавить запись в таблицу присвоена 
функция обработки события айй_епсгу. Код функции показан в ли¬ 
стинге 3.6. 
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Листинг 3.6. Динамическое добавление строк в таблицу 

ІипсСіоп аскЗ_епі:гу(зигпаітіе,пате,гпісЗ(Не) { 
гом = іаЫе.іпзегсКоюШ; 
сеІІЗ = гом.іпзеПСеІНО); 
сеІІЗ.іппегТехЬ = тіЛсІІе; 
се112 = гом.іпзегіСеІІ(0); 
се112.іппегТехЕ = паше; 
сеі11 = гом.іпзегЪСеІ1(0)7 
сеі 11. іппегТехІ: = зигпаше; 

} 

В функцию передаются значения полей Имя, Фамилия и Отчество. 
В первой строке функции ай<1_епігу в таблицу добавляется новая 
строка Указан индекс ввода — 1. Таким образом, каждый щелчок на 
кнопке будет вставлять новую строку под строкой заголовка, смещая 
все остальные строки вниз. 

Обратите внимание: нумерация строк, как и ячеек, на¬ 
чинается с числа 0, т.е. первая строка в таблице явля¬ 
ется нулевой. Номер последней строки равняется числу 
строк таблицы минус единица Если индекс окажется 
больше этого числа, строка не будет добавлена в та¬ 
блицу. 

Затем происходит добавление ячеек в новую строку и ввод соот¬ 
ветствующего текста. Все ячейки вводятся под индексом 0 и каждая 
новая ячейка смещает предыдущие вправо по строке. Поэтому пер¬ 
вой добавленной ячейке мы присваиваем текст последней ячейки 
в строке: Попробуйте самостоятельно изменить код таким образом, 
чтобы ячейки вводились в строку последовательно, с первой по по¬ 
следнюю. 

Данную программу можно усовершенствовать — таблицу со стро¬ 
кой заголовков не вводить жестко в код НТМЦ а создать динамиче¬ 
ски при первом щелчке на кнопке. Можно добавить программу, кото¬ 
рая проверяла бы, есть ли данные в полях и не совпадают ли они с уже 
существующими записями, чтобы избежать ввода повторяющихся и 
пустых строк. Можно добавить средства удаления записей из табли¬ 
цы. Но все эти инструменты требуют более сложного программиро¬ 
вания с проверкой условий, выполнением циклов и вычислениями 
положения ячеек в таблице. Об управлении ходом выполнения про¬ 
граммы речь пойдет в главе 5. 
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Динамическое изменение списков 

Заменим на \УеЬ-странице таблицу объектом раскрывающего¬ 
ся списка сБЕЬЕСТ Ю= 1 зеІесГог ' ЫАМЕ= ' зеІесГог ' ></ЗЕЬЕСТ>. 
Заменим также код функции айс1_епі:гу, как показано в листинге 3.7. 
Листинг 3.7. Динамическое добавление пунктов в список 

Гипсе іоп айсЦэпегу (8игпате,пате,ті<М1е) { 
епГгу = зигпате + " " + пате + " " + тійсііе; 
орг = йоситепс. сгеаееЕІегпепТ (' ОРТІОЫ '); 
оре.ѵаіие = епегу; 
орГ.СехТ = епс гу; 
зе1есеог.ореіопб.ай(3(оре г 0} ; 

} 

Теперь записи из текстовых полей формы заносятся в раскрываю¬ 
щийся список (рис. 3.8). 



Рис. 3.8 . Динамическое добавление пунктов в список 

В первой строке функции фамилия, имя и отчество, взятые из 
полей формы, объединяются в одну строку епГгу. Затем создается 
объект пункта списка орг, параметрам которого ѵаіие и ГехГ при¬ 
сваивается полученная строка текста. Пункт списка добавляется в 
начато списка командой имя_списка. орг іопз . асМ { о6ъект__пункта, 
индекс). 
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Сообщения для посетителей ѴѴеЬ-страниц 

^ѵаЗсгірГ предоставляет много средств для организации диаюга 
между создателем и посетителями \ѴеЬ-страницы. Наиболее эффек¬ 
тивны в этом плане диалоговые окна, с помощью которых можно как 
сообщить информацию, так н попросить подтверждения действия 
или задать вопрос посетителю. Кроме того, сообщения для пользова¬ 
телей можно показывать в строке состояния и строке заголовка окна 
обозревателя. 

Использование диалоговых окон 

В ^ѵаЗсгірТ используются три встроенных диалоговых окна. За¬ 
головки и набор кнопок в этих окнах постоянны. Текст сообщения за¬ 
дается аргументом функции открытия диалогового окна. 

♦ аіегъ {• сообщение ') открывает диалоговое окно с текстом 
сообщения и единственной кнопкой ОК (рис. 3.9). В качестве 
сообщения можно использовать обычные строки текста, за¬ 
ключенные в кавычки, цифры, переменные и вызовы функ¬ 
ций, возвращающие текстовые или цифровые значения. Это 
диалоговое окно применяется для показа предупреждений или 
информационных сообщений, не требующих от пользователя 
принятия каких-либо решений. 

/" _ Функцию аіегт удобно использовать для отладки сце- 

I На заметку ) нариев. Поместите функцию аіегс в любой строке кода 
V У сценария, чтобы определить сбойную строку или ото- 

бразить текущие значения переменных. 

♦ соп^іпп( ' сообщение ■) открывает диалоговое окно с тек¬ 
стом сообщения и двумя кнопками ОК и СапсеІ (рис. 3.10). 
Обычно в сообщении пользователю предлагается подтвердить 
выполнение операции, щелкнув на кнопке ОК, или отказать¬ 
ся от выполнения щелчком на кнопке СапсеІ. В зависимости 
от выбора кнопки функция сопіігш возвращает значение 
Сгие (ОК) или іаіве (СапсеІ). Возвращенное значение затем 
анализируется в конструкции с оператором іі. (Подробнее 
переменные, типы данных и операторы рассматриваются в 
главе 4.) 
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♦ рготре ( 1 сообщение ', 1 текст по умолчанию ') открывает ок¬ 
но для ввода данных пользователем. Кроме кнопок ОК и СапсеІ 
данное окно содержит текстовое поле ввода (рис. 3.11). В тек¬ 
стовом ноле по умолчанию отображается текст, заданный во 
втором аргументе функции ргогпрс. Чтобы оставить текстовое 
поле пустым, введите во втором аргументе пустую строку — "". 
Если второй аргумент пропустить, то в текстовом поле ото¬ 
бразится текст ипдегіпед, как показано на рис. 3.11. После 
щелчка на кнопке ОК функция ргошре возвращает 
значение текстового поля, а после щелчка на кнопке 
СапсеІ — значение ііаІБе. 

Пример использования диалоговых окон показан в 
листинге 3.8. 



Пример 


Листинг 3.8. Применение стандартных диалоговых окон 
в коде сценария 

<нтмь> 

<НЕАО> 

<ТІТЬЕ>Диа лотовые окна</ТІТЪЕ> 

<5СШРТ> 

ЕипсСіоп <Зо_раутепс(саг*:) { 
аіеге (саге) ; 

} 


Нтсе іоп еіпізЬО { 

а1еге("До свидания,вы покидаете систему 
электронных платежей1"); 

) 

</$СКІРТ> 

</НЕАБ> 

<ВОВУ> 

<5СВІРТ> 

аІегеСВы вошли в систему электронных платежей!"); 
іі: (сопЕіпМ "Хотите ли вы выполнить платеж?")) { 

саге = рготре(* Введите номер кредитной карточки."); 
іе(сопеігт( “Вы ввели номер карточки " + саге + ", 
пожалуйста подтвердите.")) 
йо_раутепС(саге); 
еіве 

еіпізЬ{ ); 

) 
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еізе 

ііпізЫ ); 

</2СКІРТ> 

</ВОБУ> 

</НТМБ> 

Основной раздел содержит сценарий, который выполняется авто¬ 
матически во время загрузки \ѴеЬ-страницы. В первой строке сценария 
функция аіегс открывает окно сообщения, показанное на рис. 3.9. 

Далее выполняется конструкция іі (сопСігш( "Хотите ли вы вы¬ 
полнить платеж? ")). Функция сопГ іггп открывает диалоговое окно, 
показанное на рис. 3.10. 


I' '.-Ж Ц РяОж 

Рис. 3.10. Окно под¬ 
тверждения 

После щелчка на кнопке ОК выполняются команды, следующие за 
конструкцией с оператором і і:, а если щелкнуть на кнопке СапсеІ - 
выполняются команды, следующие за оператором еізе. Таким об¬ 
разом, если вы подтвердите желание выполнить платеж, следующая 
команда ргогпрГ (" Введите номер кредитной карточки.") откроет 
диалоговое окно, показанное на рис. 3.11. 



Рис. 3.11- Окно запроса сценария 



Рис. 3.9. Окно сообщения 



Введите номер карточки и щелкните на кнопке ОК. Введенное 
число будет сохранено в переменной сагр. 

Далее в сценарии следует еще одна конструкция с оператором іі 
и функцией сопіігт. Попробуйте самостоятельно на практике разо¬ 
браться в работе вложенных операторов іТ. Если не получится, 
не огорчайтесь — мы вернемся к этой теме в главе 4. Обратите также 
внимание на то, что в функции сопіігш текст сообщения формирует¬ 
ся из строк и значения переменной сагС: 
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сопЕігт{ “Вы ввели номер карточки " + сагЕ + ", 
пожалуйста, подтвердите.") 

Результатом выполнения сценария будет либо вызов функции 
йо_раушепе, в которую передается номер карточки (в нашем при¬ 
мере эта функция просто покажет номер в окне сообщения), либо 
вызов функции Сіпізіі, которая сообщает о завершении выполне¬ 
ния программы. 


Сообщения в строке состояния 

Для управления текстом строки состояния используются два 
метода. 


♦ йе^аиіъзъаъив = Ъехб — устанавливает текст строки состо¬ 
яния по умолчанию. Обычно эта установка производится во 
время загрузки ЛѴеЬ-страницы в сценарии основного раздела. 

♦ вЪаЬив = Сехъ — используется в функциях обработки собы¬ 
тий для установки контекстно-зависимых сообщений. 

Строка состояния принадлежи! объекту иіп<Зом, поэтому данные 
методы вызываются либо для объекта окна обозревателя по его име¬ 
ни, либо для текущего окна с ключевым словом зеі і или иіпскж. На¬ 
пример, ниже показан синтаксис обработки события 0ЫЕ0С1Т8: 
(ЖРОСІДЗ = "зеІС.зСаГиз - 'Введите свой 
адрес электронной почты'" 

0ЫР0СБ8 = "міпсІом.БІіаГиБ = 'Введите свой 
адрес электронной почты'" 

ОМРОСИЗ = "МуМіпсІом. БГаТііЕ - 'Введите свой адрес 
электронной почты'" 

В первых двух случаях устанавливается текст строки состояния 
текущего окна, а в третьем случае — строка состояния окна с именем 

МуИіпсІои. 



В случае использования метода златиз для обработки 
событий 0Ш01І5Е0ѴЕВ и ошоцЗЕоит функция должна 
завершаться командой гегигп сгие: 

0Ш01І5Е0ѴЕК = "БеШ. зТаТиз - 'Моя электронная 
почта'; геСигп Тгие;" 

Познакомимся на примере листинга 3.9 с использова¬ 
нием сообщений в строке состояния. 
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Листинг 3.9. Установка сообщений в строке состояния 

<ВОИУ> 

<2СКІРТ> 

веііі .сІе^аиІбВбабие "Глава: Детские годы" 

</БСКІРТ> 

<Н1 АЫСИ="сепі:ег">Детские годы</Н1> 

<ТАВЬЕ ЛЫС^Че^’ ИШГН= ’ 200 ’ хТКхТН> 

<А НКЕР= 1 Ьоизе. ірд ’>< ІМС 5ЕС= 1 Ьоиее_Бша11.эрд 1 
0№ЮиЗЕ0ѴЕК="зе1 Г.80аТиБ=’Щелкните, чтобы посмотреть большую 
фотографию 1 ; геЬшгп бгие;" ТІТЬЕ=" Щелкните, чтобы открыть"></ 
АхВК>Дом, где прошло детство художника 
< /ТН>< /ТЕх /ТАВЬЕ> 

<Р>Внешне история карьеры ... </Р> 

</ВСЮУ> 

Раздел <ВСЮУ> начинается со сценария, в котором устанавливает¬ 
ся текст в строке состояния по умолчанию. Далее следует разметка 
АѴеЬ-страницы с помощью таблицы, в ячейках которой находятся ри¬ 
сунок и подпись к рисунку, причем рисунок является ірафической ги¬ 
перссылкой, открывающей копию рисунка большего формата в новом 
окне обозревателя. Чтобы сообщить пользователю об этом, событию 


Г Э) «змамсфы Іяік-аіміі'кіАрги Йі» .X 1 

о ** 

'*»«* 4$) ^ 

ІУа '—**■ ^' 
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ІН.І^ІЧН) »***, г*Н)*:Ди*І.М*ВЭ4*<»ѴЯк 

т и*ти « и > *«« 
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ЛЧШ Г|>ѴДО*Л Г «ІрЛ ф :- 
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Строка состояния Всплывающая подсказка 


Рис. 3. 12. Поклз сообщения для пользователя в (троке 
состояния и с помощью всплывающей подсказки 








102 


Глава 3 


ОКМО' ’БЕОѴЕР в дескрипторе рисунка < [Мб; задан метод вывода соот¬ 
ветствующего текста в строке состояния. Как только указатель мыши 
выйдет за рамку рисунка, в строке состояния восстановится текст, за¬ 
данный по умолчанию. Результат выполнения программы показан на 
рис. 3.12. 



Показ сообщений в строке состояния - не самый эф¬ 
фективный метод информирования посетителей ѴѴеЬ- 
страницы. Часто это сообщение просто остается неза¬ 
меченным. Кроме того, размеры строки состояния не¬ 
достаточны, чтобы вместить подробное объяснение. 
Использование всплывающей подсказки, устанавлива¬ 
емой с помощью атрибута ИТЬЕ, будет гораздо эффек¬ 
тивнее (см. рис. 3.12). 


Динамическое изменение заголовков окна 
обозревателя 

Динамическое изменение заголовков полезно при работе с набо¬ 
рами рамок. Содержимое рамок постоянно меняется, но в окне обо¬ 
зревателя отображается заголовок, заданный в файле набора рамок, 
этот заголовок может не соответствовать основному содержимому 
окна. (Более подробно о наборах рамок рассказывалось в главе 2.) 
В листинге 3.10 показан код страницы с набором рамок, в котором 
текст заголовка изменяется динамически каждый раз при смене со¬ 
держимого основной рамки таіп. 

Листинг 3.10. Динамическое изменение заголовка набора рамок 

<НТМЬ> 

<НЕАБ> 

<ТІТЬЕ > Заголовок по умолчаниях /ТІТЬЕ> 

<5СКІРТ> 

{ипсГіоп ирбаСе_1:іГІе( ) { 
ѵаг і — 1; 
иЬі1е(і < 100) { 
іі. (таіп.сЗосішіепГ. СіГІе) { 
сіоситепс.сісіе - таіп.йосшпепг.сігіе; 

Ъгеак; 

} 

і = і + 1 

}} 
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</8СКІРТ> 

</НЕАЭ> 

<ЕКАМЕ5ЕТ К0М5=’10%,*'> 

<РКАМЕ ЫАМЕ='Тор' ЗКС='Сор.Ылп'> 

<РКАМЕ МАМЕ-' шаіп 1 2 3 8КС=' таіп . ЬСт' 0ИЬ0АБ= ' ирйаЬе_ЫЫе () ; ' > 
</РКАМЕ5ЕТ> 

</НТМЬ> 

В коде листинга 3.10 создастся набор, состоящий из двух горизон¬ 
тальных рамок — Тор (для панели навигации) и гпаіп (для отобра¬ 
жения основного текста). Содержимое рамки таіп будет постоянно 
меняться в результате щелчков на гиперссылках в панели навигации. 
Чтобы решить проблему, связанную с отображением в окне обозре¬ 
вателя заголовка текущего документа, в дескрипторе <РКАМЕ>, кото¬ 
рый определяет основную рамку, для события СЖШАО устанавли¬ 
вается функция ирсІаСе_і:іСІе. Код функции определен в сценарии 
в разделе заголовка. Идея очень проста: заголовку окна йоситепС. 
сітіе присваивается заголовок документа, находящегося в основ¬ 
ной рамке таіп . сіоситепс . ТіТІе. Но эту идею не так-то просто ре¬ 
ализовать. Проблема в том, что событие (ЖЬОАО активизируется с 
началом загрузки документа в рамку, т.е. функция ирйате_і:іс1е 
вызывается в тот момент, когда еще ни документа, ни его заголовка 
в рамке нет. 

"Ч Эту проблему можно решить с помощью конструкции 
I Пример ) оператора цикла ѵЛіі 1е и условного оператора іі (6о- 
лее подробно о циклах и условных операторах рас- 
сказывается в главе 5). 

1. В первой строке определяется переменная і, которой присваи¬ 
вается значение 1. 

2. Затем задается цикл иЫ 1е (условие) { тело цикла; }. Коман¬ 
ды тела цикла будут выполняться до тех пор, пока выполня¬ 
ется заданное условие. В данном случае условие состоит в том, 
что переменная і меньше 100: і<100. Поскольку с каждым 
циклом і увеличивается на 1, цикл повторится как минимум 
99 раз — этого достаточно для того, чтобы дождаться загрузки 
заголовка страницы в рамке шаіп. 

3. Помимо приращения переменной і в теле оператора выпол¬ 
няется проверка еще одного условия с помощью оператора 
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1С (условие) {операторы ;}. Операторы конструкции Л вы¬ 
полняются только в случае выполнения ладанного условия. 

4. В качестве условия оператора і і проверяется наличие объек¬ 
та заголовка в документе рамки шаіп: таіп.гіоситепТЛіЫе. 
Как только заголовок будет обнаружен, первый оператор кон¬ 
струкции і і присвоит заголовок документу с набором рамок, а 
следующий за ним оператор Ьгеак прервет цикл 


Объект заголовка будет истинным, даже если он ока 
жется пустым. Попробуй те самостоятельно добавить 
в код функции ирйаТеЛЛЫе еще одну конструкцию 
с оператором і [, который будет проверять, не является 
ли заголовок открываемого документа пустым: таіп. 
йоситепЕ. I іТІе ! Только если это условие вы¬ 

полняется, странице присваивается заголовок загоужа 
емого документа, в противном случае восстанавлива 
ется заголовок по умолчанию: еіее {йоситепЬ.гіЫе 
'Заголовок по умолчанию'); Чрезвычайно важно 
проследить, чтобы в коде функции число открывающих 
фигурных скобок (<) соответствовало числу закрываю¬ 
щих скобок 1 )) 



Динамическое форматирование 
элементов ѴѴеЬ-страницы 

В главе 2 вы познакомились с принципами форматирования тек¬ 
ста и прочих элементов \ѴеЬ-страницы. Цвет, стиль, выравнивание, 
наличие рамки и некоторые другие свойства можно контролировать 
следующими способами: 

♦ с помощью специальных дескрипторов форматирования; 

♦ с помощью атрибутов в дескрипторах элементов ѴѴеЬ-страницы; 

♦ с помощью параметров атрибута БТУЪЕ. 

Дескрипторы форматирования можно добавить или удалить, ис¬ 
пользуя атрибут іппегНТМЦ но это самый длинный и неэффектив¬ 
ный путь. Для динамического форматирования элементов страницы 
лучше применять атрибуты дескрипторов НТМЬ. 
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Установка атрибутов в коде НТМІ. 

Чтобы получить доступ к атрибутам элемента \ѴеЪ-страницы из 
кода сценария, необходимо присвоить атому элементу уникальное 
имя, установив его в дескрипторе элемента для атрибутов ю и МАМЕ. 
Если уникальное имя задано, то значение атрибута можно изменить 
динамически в коде сценария следующим образом: 
имя_эпемента.атрибут = значение 

Например, скроем границы таблицы с именем сЪ: 

СЬ.Ьогйег - О 

Гораздо больше возможностей для форматирования элементов 
\ѴсЬ-страницы предоставляет атрибут 8ТУЕЕ. В главе 2 вы узнали, что 
значением атрибута ЗТѴЬЕ является текстовая строка со списком па¬ 
раметров форматирования и их значений, например: 

<Р ІБ=раг1 ЫАМЕ=раг1 5ТУЬЕ=' соіог : гей; ^опІг.-еЬуІе: ііа1іс'> 

В коде сценария |аѵа$сгірІ стиль объекта можно изменить двумя 
спос обами: присвоить атрибуту БТУІ.Е строку текста с параметрами 
так же, как в коде НТМЬ. или обратиться непосредственно к параме¬ 
тру, как в следующем примере: 
рагі.зсуіе.соіог = "РЕРГОО"; 

Изменение цвета фона и гиперссылок 
ѴѴеЬ-страницы 

В коде НТМІ. можно именовать вес объекты Шеітстраницы. сот- 
даваемые с помощью соответствующих дескрипторов. Но именование 
никогда не применяется к обязательным дескрипторам: 

♦ <НТМЬ> - соответствует объекту міпйою; 

♦ дескрипторы заголовка \ѴеЬ-страшщы и <ВСЮѴ> - соответ¬ 
ствуют объекту йоситепЬ. 

Например, для доступа к тексту заголовка использовался следую¬ 
щий код (см. раздел «Динамическое изменение заголовков окна обо¬ 
зревателя» этой главы): 
йосшпепС .Сісіе = текст; 

Доступ к атрибутам, устанавливаемым в дескрипторе <ВСЮУ>, так¬ 
же можно получить посредством объекта йосишепг : 
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♦ (Носитель. ЬдСоІог — цвет фона; 

♦ (Носитель. ЬдСоІог — цвет текста страницы по умолчанию; 

♦ «Носитель ЛіпкСоІог цвет неиспользованной гиперссылки; 

♦ (Носитель. аіілксоіог цвет активной гиперссылки в тот мо¬ 
мент, когда на нее наведен указатель мыши; 

♦ (Носитель. ѵІіпкСоІог — цвет использованной гиперссылки. 



В случае изменения настроек цвета в одной из рамок или 
в другом окне обозревателя перед словом (Носитель 
нужно указать имя рамки или окна: 

міл2 .(Носитель .ЬдСоІог = Ыие; 
таіп. (Носитель. ІіпкСоІог = мЬіЬе; 



Пример динамического изменения фона \ѴеЬ-стра- 
ницы показан в листинге 3.11. 


Листинг 3.11. Динамическое изменение фона ѴѴеЬ-страницы 


<нтмь> 

<НЕАБ> 

<ТІТЬЕ>Выбор фона</ТІТЬЕ> 

<5СКІРТ> 

ЬипсЫоп сЬалде_со1ог(Ьд,Ьд) { 

(Носитель. ЬдСоІог = Ьд; 

(Носитель. ЬдСоІог = Ьд; 

} 

</$СКІРТ> 

<ВСЮУ ВСС0Ь0К=" іѵогу" (ЖР0Ш5=" йоситепЬ. ЬдСоІог =' іѵогу'" 
0№ШК= “(Носитель. ЬдСоІог =' дгау'" > 

<Н2>Выберите цвет фона</Н2> 

<Р0КМ> 

Щелкните на кнопке: 

<ВК><ІНРЦТ ТУРЕ-ЬиЬЬол ѴАЬЬЕ="Белый" 0ЫСЬІСК="сЬапде_со1ог 
(’юЫЬе', 'Ыаск' ); "> 

сІЫРІІТ ТУРЕ=ЬиЬЬоп ѴАШЕ="Желтый" 0ЖХІСК="сЪапде_со1ог 
(’уеііом', 'Ыие'); "> 

<ІЫРЦТ ТУРЕ=ЬиЬЬоп ѴАЫІЕ="Синий" 0№ЬІСК= "сІіапде_со1ог 
(‘Ыие*, 'уеііок'); "> 
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сІКРІГТ ТУРЕ=ЪисСоп ѴАШЕ= "Черный" 0НСЫСК="сЪапде_со1ог 
('Ыаск', 'иЪіСе' ); "> 

</В0БУ> 

</НТМЬ> 

Страница содержит набор кнопок, изменяющих цвет фона и тек¬ 
ста по умолчанию (рис. 3.13). Событиям (ЖСЫСК кнопок присвоено 
выполнение функции сЪапде_со1ог, в аргументах которой переда¬ 
ются соответствующие значения цветов. Определение функции на¬ 
ходится в сценарии в разделе заголовка. 



***» ОД** ИА***» О#*» 


: **»*»»* «*** й: |3 •» <«■<** I 

Выберете цвет фош* 


ШнЦ0И№ 



Рис. 3.13. Щелчок на кнопке изменяет цвет 
фона и текста Ѵ/еЬ-страницы 


Обратите внимание на использование событий ОИГОШб и ОШШК 
в дескрипторе <ВСШУ>. Изначально фону \ѴеЬ-страницы задан цвет 
слоновой кости — іѵогу. Если вы щелкнете на рабочем столе \Ѵіп- 
бо\ѵз или перейдете к окну другого приложения, в окне обозревателя 
произойдет событие потери фокуса — ОИВЬШ. Функция обработки 
этого события изменяет цвет фона страницы, он становится серым. Но 
как только вы вновь выберете окно обозревателя, событие ОЫРОСИЗ 
восстановит цвет фона, заданный по умолчанию. 

Документирование кода сценариев 

Код < ценариев должен не только правильно работать, но и быть 
понятным настолько чтобы другой разработчик или вы через опреде¬ 
ленный период времени смогли легко разобраться в программе когда 
придет время обновить ѴѴеЬ-страницу. 
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Чтобы облегчить работу с кодом сценария, всегда подбирайте для 
функций н переменных такие имена, которые объясняли бы их на¬ 
значение. Но использование слишком длинных имен затрудняет ра¬ 
боту и усложняет код. Добавить более длинное описание назначения 
функции, переменной или логического блока внутри кода сценария 
можно с помощью комментариев. 

Комментарии вводятся в код сценария двумя способами. Корот¬ 
кий однострочный комментарий вводят после символов //. Такой 
комментарий может занимать целую строку или находится в конце 
строки программного кода: 

// Выполняем цикл по элементам массива 
ѵаг і = 0; // устанавливаем начальное 

// значение счетчика циклов 

Длинные многострочные комментарии начинаются символами /* 
и заканчиваются символами */, например: 

^************************************************ 

* Этот сценарий предназначен для вычисления * 

* налога за автомобиль. Данные о типе автомобиля* 

* годе выпуска берутся из соответствующих полей * 

* формы. 

************************************************* / 

Обозреватель сумеет распознать символы начала и окончания 
комментария в примере, показанном выше, даже если вы окажетесь 
в затруднении. 






Глава 4 

Работа с данными 
в сценариях іаѵаБсгірГ 


На вашем компьютере установлено множество программ для ра¬ 
боты с текстом и электронными таблицами, рисунками и фотогра¬ 
фиями, звукозаписями и видеоклипами, а также множество других 
приложений, необходимых для повседневной работы и отдыха. Что 
общего между всеми этими программами? Они, как изначально и сам 
компьютер, предназначены для хранения и обработки данных. Все 
данные, будь то текст, рисунок или звук, хранятся в памяти компью¬ 
тера в виде универсального двоичного кода. В то же время для работы 
с данными разных типов требуются свои специфические методы и 
подходы. Программист должен иметь возможность выбрать из мно¬ 
жества данных на компьютере требуемое значение, использовать его 
и сохранить результат таким образом, чтобы его вновь можно было 
использовать в дальнейшем. Все эти проблемы решаются с помощью 
переменных разных типов, речь о которых пойдет в этой главе. 

Создание переменных 

Первое, что вам необходимо уясни гь. это смысл использования 
переменных. Итак, что же такое переменная ? Все данные на компью¬ 
тере хранятся в ячейках памяти на встроенных или съемных носите¬ 
лях, таких, как жесткий диск, дискета, компакт-диск или устройства 
флэш-памяти, либо в оперативной памяти компьютера. Все ячейки 
памяти имеют свои уникальные двоичные адреса. Кроме того, для за¬ 
писи разных данных требуется разное количество элементарных яче¬ 
ек памяти. Чтобы упростить работу, связанную с выделением памяти 
и записью данных в ячейки, для языков программирования была раз¬ 
работана концепция переменных. Переменную можно представить 
как именованный резервуар, в котором хранятся определенные дан¬ 
ные, называемые значениями переменных. На компьютере с именем 
переменной ассоциируется адрес массива ячеек памяти, в которых 
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хранится значение. Но как компьютер узнает, сколько ячеек нужно 
выделить для сохранения данных? Об этом компьютеру сообщает 
тип переменной. 

Таким образом, прежде чем использовать переменную, в большин¬ 
стве языках проіраммирования необходимо сначала объявить пере¬ 
менную, т.е. установить ее имя и тин. 

Іаѵа5сгір* представляет собой упрощенную версию язы¬ 
ка программирования. В іаѵаБсгір! объявление пере¬ 
менных происходит автоматически при присвоении им 
первого значения, что не допускается в других, про¬ 
фессиональных, языках. Более того, .ІаѵаБсгірІ позво¬ 
ляет динамически изменять тип переменной, просто 
присвоив ей значение иного типа Хотя это возможно, 
такое поведение считается дурным тоном программи¬ 
рования, как и отсутствие объявлений переменных. 

Для объявления переменных в ^ѵа5сгірІ используется ключе¬ 
вое слово ѵаг. Хотя объявления можно пропустить, код сценария 
станет понятнее, если в самом начале будет дан список используе¬ 
мых переменных; 

ѵаг пате = рготрс {"Введите ваше имя."); // имя пользователя 

ѵаг алюипб = сиггепсу. ѵаіие; // сумма денег, взятая 

//из поля "Сумма" 

ѵаг даГе = пеѵ? РаГе (); // объект текущей даты 

ѵаг гаСе =5.05; // курс 

За ключевым словом ѵаг следует имя переменной. Тин перемен¬ 
ной устанавливается автоматически в ходе присвоения переменной 
первого значения. Оператором присваивания служит знак равенства 
(-). Значение, находящееся справа от знака равенства, присваивается 
переменной слева. Справа от знака равенства может находиться; 

♦ константное значение — число или текст (текстовое значение 
должно быть заключено в кавычки; 

♦ вызов функции — в примере выше использовались функция 
рготрГ, открывающее диалоговое окно и окно, возвращающее 
текст, введенный пользователем (см. главу 3), а также функ¬ 
ция Расе, возвращающая объект текущей даты (подробнее об 
объекте даты рассказывается в главе 6); 
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♦ другая переменная имя переменной которая была объявлю 
на ранее в том числе атрибуты элементов \ѴеЬ страницы, на¬ 
пример, значение текстового почт как в примере выше. 


Имя переменной 

В ДаѵаЗсгірІ следует придерживаться определенных правил при 
именовании переменных; 

♦ в имени можно использовать латинские буквы, цифры и под¬ 
строчный символ «_», 

♦ имя переменной должно начинаться с буквы или с подстрочно¬ 
го символа, но не с цифры; 

♦ в имени переменной нельзя использовать знаки пѵнктуации, 
специальные символы, а также пробелы; 

♦ имя переменной чувствительно к регистру букв (ешп и Зші бу¬ 
дут рассматриваться как две разные переменные); 

♦ длина имени переменной не ограничена 



В сценарии у всех переменных с перекрывающимися 
областями видимости должны быть уникальные имена. 
(Об областях видимости переменных пцидет речь далее 
в этой главе ) Если в сценарии будет объявлена пере¬ 
менная с таким же именем, как у ранее созданной пере¬ 
менной новая переменная заменит собой предыдущую. 



Желательно использовать такие имена переменных, 
которые объясняли бь тип и назначение хранимых в 
них данных Но при этом следует быть максимально ла¬ 
коничным и использовать понятные аббревиатуры слов 
и понятий. 


Типы данных 

Хотя ^ѵаЗсгірІ относится довольно демократично к типу данных 
переменной и позволяет изменять его в ходе выполнения программы, 
знание типов данных вам необходимо, поскольку с каждым из них 
связаны определенные ограничения в использовании переменной. 
В ДаѵаЗсгірІ различают следующие типы данных: 

♦ целое число; 

♦ число с плавающей запятой; 
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♦ строка текста; 

♦ логическая переменная: 

♦ объект 

/■ Как уже отмечалось, смена типа переменной в ходе 

[На заметку) выполнения программы — это дурной тон программи 
У рования Напротив, хорошем тоном будет маркирова- 
0_ ние типа переменной в ее имени Например, имена пе- 
° ременных могут выілядеть следующим образом іѵаі, 
(Ѵаі, ЕѴаІ, ЪѴаІ и оѴа 1 (в соответствии с типами дан 
ных, представленными в списке выше). Первая строчная 
буква указывает тип переменной, а за ней начинается 
собственно имя переменной с прописной буквы — этим 
подчеркивается, что первая буква была служебной 

Выделять объекты в особый тип данных не совсем вер¬ 
но Р действительности переменные других типов также 
являются объектами. Но далее в этой книге под объек¬ 
тами мы будем понимать составные переменные, со¬ 
держащие несколько значений одного типа или разных 
типов. К этой же группе можно отнести переменную 
пи И, котооая не содержит никаких значений. Подробнее 
об объектах в качестве переменных вы узнаете далее 
в этой главе, в разделе . Объекты и массивы данных» 

Целые числа 

Переменные этого типа могут содержать целочисленные значе¬ 
ния, как положительные, так и отрицательные Отрицательные чис¬ 
ла начинаются со знака «-». В сценариях можно использовать целые 
числа разных нумерических систем: привычной нам десятеричной, 
восьмеричной и шестнадцатеричной На то что данное число запи¬ 
сано в восьмеричной системе, указывает лидирующий С, а признаком 
шестнадцатеричной системы являются лидирующие Ох. Например, 
запишем число 14 в разных нумерических системах. 

♦ Десятеричная 14. 

♦ Восьмеричная: 016. 

♦ Шестнадцатеричная: ОхЕ. 

Целочисленные переменные можно использовать в математиче¬ 
ских операциях с которыми мы познакомимся ниже в этой главе 
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В листинге 4.1 показан пример объявления и использования цело¬ 
численных переменных. 

Листинг 4.1. Использование целых чисел 

<нтмб> 

<НЕАБ> 

<ТІТЬЕ>Целые числа</ТІТЬЕ> 

</НЕАО> 

<ВОБѴ> 

<БСКІРТ> 

// Объявления переменных 

ѵаг іѴаІ =14; // десятеричное число 

ѵаг ЪѴаІ = ОхЕ; // шестнадцатеричное число 

ѵаг оѴаІ = 016; // восьмеричное число 

// Вывод переменных в окне обозревателя 

сЗосишепб ,мгібе( "Это десятеричное число: " + ІѴаІ + "<ВК>“); 
йосишепб .кгіЪеІ "Это шестнадцатеричное число: “ 

+ ЪѴаІ + "<ВН>"); 

йосшпепЪ .ѵпгібе ("Это восьмеричное число: " + оѴаІ + "<ВЕ>"); 
<Зосишепб.ь?гі1:е{ "Это сумма чисел: * + (оѴаІ + ЪѴаІ) + "<ВЕ>"); 
</8СКІРТ> 

<ВОСУ> 

</НТМЕ> 

Результат выполнения сценария показан на рис. 4.1 Обратите 
внимание: функция ѵ/гіъе выводит все значения как десятеричные 
числа. Целые числа можно гуммировать и использовать в других вы¬ 
числениях независимо от того, в какой нумерической системе они 
были введены. 



$ %$ *** ****»«* *\ 


«тіѵкл геяаеДО’РК'иге й 
Г>*<> ідоыѵфжчмдо «дою М 
»)пйй««і!' 28 




Рис. 4.1. Результат выполнения сценария, 
код которого приведен в листинге 4.1 
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Числа с плавающей запятой 

Числовые значения этого типа могут представлять целую и дроб¬ 
ную часть числа, отделенные точкой. На уроках математики в школе 
вы ставили десятичную запятую, но в англоязычных странах принято 
использовать десятичную точку, поэтому в_|аѵа8сгірІ число 3,2 следу¬ 
ет вводить так: 3.2. 

Зачем вообще потребовалось вводить два типа числовых значе¬ 
ний? Дело в том, что для значений с плавающей запятой компьютер 
резервирует значительно больше ячеек памяти, чем для целых чисел, 
даже если дробная часть отсутствует. Например, число 2.0 займет 
больше памяти, чем целое число 2. Результаты математических опе¬ 
раций с целыми числами будут автоматически округляться до цело¬ 
численного значения, что может привести к ошибке. И наоборот, в 
том случае, когда дробное значение не имеет смысла, например при 
вычислении необходимого числа упаковок товара, к ошибке может 
привести использование чисел с плавающей запятой. 

Числа с плавающей запятой в ^ѵаЗсгірі могут быть представлены 
в двух форматах: обычном и логарифмическом. Логарифмический 
формат имеет следующий синтаксис: 

#. ##Е?? 

Это соответствует следующей математической операции: 

#.## X 10", где 0.0 < #.## < 1.0. 

Например, число 5 140 000.0 можно представить как 5.14Е6, а чис¬ 
ло 0.0006023 — как 6.023Е-4. 

ІаѵаЗсгірІ автоматически выводит в окне обозревателя 
числа с плавающей запятой в логарифмическом фор¬ 
мате, если число превышает значение 1.0Е20 или мень¬ 
ше числа 1.0Е-7. 

Строки текста 

Строки текста могут содержать последовательности любых сим¬ 
волов, в том числе и цифр. Но в этом случае цифры будут рассматри¬ 
ваться программой как текст, а не как числовые значения. 

Чтобы присвоить текст переменной, строку следует заключить 
в кавычки. Можно использовать как одинарные ('), так и двойные 
(") кавычки, но они должны быть одинаковыми в начале и в конце 
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строки. Если строка заключена в двойные кавычки, то в тексте можно 
использовать одинарные. Чтобы ввести в текст двойные кавычки, ис¬ 
пользуйте символ обратного слеша: \". Этот символ указывает про¬ 
грамме, что за ним идет обычный текст, а не управляющий символ. 
Тогда добавление в текст одного символа обратного слеша будет вы¬ 
глядеть так: \\. 

Если текст выводится в окно обозревателя с помощью команды 
доситепГ .ш*ісе, то в нем для форматирования можно использовать 
дескрипторы НТМЬ. Ниже приведен фрагмент программного кода 
присвоения текста переменной и вывода значения на экран. Результат 
выполнения программы показан на рис. 4.2. 
зѴаІ = "В тексте мы можем использовать<1>\“кавычки\“</1>, 
заключать слова в <В>\<угловые\х/В> или \\косые\\ скобки."; 
гіоситепб . мгібе ( вѴаІ ); 



О" ^ 35 4= 4 ® 

' '% !* ^^>»**** "'* >«**<''» * *еЗ г **=* чс * ** *; 

мял &««*«■ 




Рис. 4.2. Вывод текстовой переменной в ок¬ 
но обозревателя 


Логические переменные 

Логические переменные могут принимать только значения сгие 
(истинно) и ^аізе (ложно). Впрочем, этим переменным также мож¬ 
но присваивать целочисленные значения, при этом 0 будет соответ¬ 
ствовать Саізе. а любое другое число — Сгие. Обычно логические 
переменные используются в логических конструкциях управления 
выполнением программы г использованием операторов іГ и еізе. 
Более подробно о логических операторах рассказывается в следую¬ 
щей главе. 
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Управление переменными 

Переменные в сценариях создаются для последующего использо¬ 
вания в вычислениях и вывода результатов в окне обозревателя, диа¬ 
логовом окне или для подачи запроса формы. Начинающие програм¬ 
мисты часто сталкиваются с тем, что переменная, созданная ранее, 
оказывается недоступной для использования там, где это значение 
необходимо. При работе с переменными следует учитывать такое по¬ 
нятие, как область видимости переменной. Другая довольно распро¬ 
страненная проблема связана с несоответствием тина переменной 
требованиям операции, в которой эта переменная используется. Как 
вы узнаете ниже, в разделе «Выражения и операции», использование 
одного и того же оператора приведет к совершенію разным результа¬ 
там или даже вызовет ошибку, в зависимости от тина переменных, 
к которым он применен. Данная проблема становится особенно 
острой вДаѵаЗсгірі, поскольку этот язык позволяет произвольно из¬ 
менять тип переменной в ходе выполнения сценария. Далее мы рас¬ 
смотрим способы управления переменными и их проверки. 

Область видимости переменных 

Под областью видимости переменных подразумевают часть про¬ 
граммного кода, в которой переменная может использоваться. При 
создании переменной компьютер временно выделяет ячейки намят и 
для хранения ее данных. Как только необходимость в переменной ис¬ 
чезает, память освобождается и становится доступной для записи дру¬ 
гих переменных. В ^ѵаЗсгірГ нет средств, подобных тем, что имеются 
в профессиональных языках программирования, которые позволяли 
бы управлять памятью компьютера, поэтому выделение ячеек памя¬ 
ти и их очистка происходят автоматически. Разработчик сценариев 
должен точно знать, в какой части программного кода переменная до¬ 
ступна, а в какой нет. 

В зависимости от области видимости различают два вида пере¬ 
менных. 

♦ Глобальные переменные это переменные, созданные непос¬ 
редственно в коде сценария в блоке <5СКІРТ>...</ЗСКІРТ> где- 
либо в коде ѴѴеЬ-страницы. Во время загрузки \ѴеЪ-страни- 
цы эти переменные доступны для использования в функци¬ 
ях и сценариях, код которых находится ниже в коде НТМЬ 




Работа с данными в сценариях .ІаѵаЗсгірІ: 


117 


АѴеЬ-страницы. После окончания загрузки ѴѴеЬ-страницы эти 
переменные доступны для всех функций текущего докумен¬ 
та. а также для сценариев, запускаемых в других окнах обозре¬ 
вателя, если есть возможность обратиться к текущему окну по 
имени: ИмяОкна.имя_переменной. (Об управлении окнами 
обозревателя речь пойдет в главе 6.) 



Поскольку сценарии выполняются по мере загрузки 
ѴѴеЬ-страницы, глобальные переменные следует объяв¬ 
лять раньше, чем они будут использованы в данном 
сценарии, другом сценарии или в функции. Например, 
предположим, что есть функция Еипкі, в которой исполь¬ 
зуется глобальная переменная дѵаі. В табл. 4.1 показано 
правильное и ошибочное использование переменной. 


Таблица 4.1. Примеры использования глобальной переменной 


Правильное использование 

Ошибочное использование 

ѵаг дѴаІ = 10; 

ЕипкО ; 

... код сценария 

... код сценария 

Еипк {) ; 

ѵаг дѴаІ - 10; 


Подобные ошибки случаются довольно часто. Вызов функции, 
использующей глобальную переменную, может произойти опосредо¬ 
ванно в результате выполнения определенной серии событий, вызвав¬ 
ших соответствующие функции обработки, что не всегда очевидно во 
время разработки сценария. Будьте внимательны. 

♦ Локальные переменные - это переменные, которые объявлены 
в коде функции. Использование таких переменных ограниче¬ 
но кодом функции ниже того места, где они были объявлены. 
После завершения функции все ее локальные переменные ав¬ 
томатически удаляются из памяти компьютера, поэтому не 
могут использоваться другими функциями или командами 
сценария, даже в том же сценарии, где функция была опреде¬ 
лена или вызвана на выполнение. 



Всегда объявляйте локальные переменные в функци¬ 
ях с помощью ключевого слова ѵаг, чтобы избежать 
конфликта имен с одноименными глобальными пере¬ 
менными. Если переменная в функции создается путем 
простого присвоения значения и в данной странице 
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есть глобальная переменная с таким же именем, то 
в действительности будет происходить не создание но- 
вой переменной, а присвоение глобальной переменной 
нового значения. Позже это может привести к ошибке в 
других функциях, в которых используется глобальная 
переменная. Напротив, ключевое слово ѵаг указывает, 
что код функции нужно исключить из области види¬ 
мости одноименной глобальной переменной и вместо 
нее в данной функции использовать локальную пере¬ 
менную. Любые изменения локальной переменной в 
функции никак не повлияют на значение одноименной 
глобальной переменной. 

В листинге 4.2 показан пример правильного и ошибочного ис¬ 
пользования локальных переменных. 

Листинг 4.2. Использование локальных и глобальных переменных 

<нтмь> 

<НЕАБ> 

<ТІТЬЕ>Использование переменных< /ТІТЬЕ> 

<2СКІРТ> 

// В функциях используются глобальная и локальная переменные 
ішісбіоп гідЪбО { 
ѵаг іпТехб 

іпТехб = ргошрб{"Введите ваш текст:"); 
іб (іпТехб) 

аіегт (дТехС + іпТехс); 

} 

ііипсб іоп мгопд {) { 

а1егб(дТехб + іпТехб); 

} 

</5СКІРТ> 

</НЕАО> 

<ВОБУ> 

<8СКІРТ> 

// Глобальная переменная 

ѵаг дТехб = "Был введен следующий текст: 

</5СКІРТ> 

<РОКМ> 

сШРПТ ТУРЕ=’Ьиббоп* ѴАШЕ= "Правильное использование 
переменной" (ЖСБІСК= 1 гідЬТ () 1 ><ВК> 
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<ШРІ]Т ТУРЕ^'ЪиТЬоп' ѴАШЕ=* Ошибочное использование 
переменной" ОЖХІСК= ‘ мгопд {) ' > 

</РОКМ> 

<ВСЮУ> 

</НТМЬ> 

В сценарии основного раздела \ѴеЪ-странипы определена глобаль¬ 
ная переменная дѴаІ, которой присвоена строка "Был введен сле¬ 
дующий текст: ". Затем создаются две кнопки Правильное использо¬ 
вание переменной и Ошибочное использование переменной, вызываю¬ 
щие на выполнение функции гідЫ и мгопд соответственно. Первая 
функция сначала открывает диалоговое окно с предложением ввести 
текст, сохраняет этот текст в локальной переменной іпТехс, а затем 
показывает в окне сообщения строку, состоящую из объединенных 
значений глобальной и локальной переменных (рис. 4.3). Обратите 
внимание: функция работает, несмотря на то, что в коде НТМЬ объ¬ 
явление глобальной переменной находится ниже определения функ¬ 
ции, поскольку вызов функции происходит уже после того, как \ѴеЪ- 
страница будет загружена в окно обозревателя. 



Рис. 4.3. Правильное и ошибочное использование 
локальных переменных 


Если щелкнуть на другой кнопке, то в строке состояния окна обо¬ 
зревателя появится сообщение: Ошибка на странице. Ошибка возник¬ 
ла вследствие того, что функция обращается к переменной іпТехс, 
которая определена в другой функции и не существует в данной. 
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В 1аѵа5сгірІ обласги видимости переменных функций 
раздѣлены не в полной мере. В серии послѣдователь 
ных вызовов в теле одной функции можно обратиться 
к переменной, которая бь ла создана в теле ранее вы¬ 
званной функции. Чтобы избежать конфликта одно 
именных переменных, всегда в функциях объявляйте 
локальные переменные с помощью оператора ѵаг. 


Динамическое определение типа переменной 

Возможность смены типа переменной в ходе выполнения сцена- 
рия Даѵа5сгір1; создает ситуацию, которая невозможна во многих дру¬ 
гих языках программирования. Иногда нельзя предугадать, каким 
будет тип переменной перед ее использованием. Например, можно 
предложить пользователю ввести в поле текст или число, после чего 
выполнить ветвление программы в зависимости от типа введенных 
данных. Для определения типа переменной в коде сценария исполь¬ 
зуется команда СуреоЕ имя_переменной. Команда возвращает тек¬ 
стовое значение, соответствующее типу переменной: 

♦ пшпЬег - целое число или число с плавающей запятой; 

♦ вЪгіпд — строка текста; 

♦ Ьооіеп — логическое значение; 

♦ оЪ^есЕ объект; 

♦ ипйегСіпей - переменная нс определена (не была создана или 
программа вышла за область видимости переменной). 

Обычно проверку типа переменной выполняют в конструкции с 
оператором ІЕ, например: 
іЕ (суреоЕ ѵаі == 'зГгіпд’) 

{команды обработки строкового значения} 
еіее 

{команды обработки значения другого типа} 

А “ Если вы забыли ключевое слово, возвращаемое коман 

1 На заметку] дой гуреоЕ для данных определенного типа, проверку 
^ можно организовать следующим образом: 

о 

О • іЕ (ГуреоЕ ѵаі == СуреоЕ 'а*)- возвращает 
Сгие, если ѵаі — строка текста; 
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• ІЕ (ЕуреоЕ ѵаі ! [уреоі '1') возвращает 
Еще, если ѵаі не является число» 

(Операторы -'равнения описаны ниже в этой главе в раз 
деле «Выражения и операции».) 


Преобразования переменных 

Чаще всего конфликты типов данных возникают при использова¬ 
нии строк вместо чисел и наоборот. Иногда бывает необходимо число 
представить как строку или, скажем, вырезать из строки часть ин¬ 
формации и преобразовать ее в число. Для выполнения этих опера¬ 
ций в ^ѵаЗсгірІ предусмотрен ряд функций. 

Чтобы преобразовать числа в строки текста, используется функ¬ 
ция іобігіпді ). Вот пример использования этой функции: 
ѵаг іѴаІ = 5; 

ѵаг БѴаІ = ІѴаІ.іоЗігіпд{); 

В результате получим переменную зѵаі, значением которой будет 
строка ' 5'. 



Строковую переменную из числа можно получить, при 
ба вив число к пустой строке: 
ѵаг зѴаІ = '* + ІѴаІ ; 

Результат будет таким же, как и в предыдущем примере 


Для выполнения обратного действия используются функции раг- 
зеіпі () и рагзеРІоаі (), например: 
ѵаг зѴаІ ■= ' 5'; 
ѵаг ІѴаІ = рагзеіпі (зѴаІ); 
ѵаг ІѴаІ = рагзеРІоаі(зѴаІ); 

Первая функция возвращает целое число, а вторая — число с пла¬ 
вающей запятой. 



Использование іоЗігіпдО совершенно безопасно 
Любое число можно преобразовать в строку, а если пе¬ 
ременная окажется строкой, применение функции іо 
Зігіпд () никак ее не изменит. Напротив, использование 
функций рагзеіпі () и рагзеРІоаі (} может вызвать 
ошибку или привести к потере данных Если в начале 
строки содержится какой-либо символ, кроме цифр, 
функции возвратят значение ЫаЛ, что значит ничего- 
Допускается только наличие пробелов в начале или 
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в конце строки, но пробел или другой символ внутри чис¬ 
лового значения разорвет число. Так. рагвеіпі (1 983) 
возвратит Аналогично, отсечение целочисленной ча¬ 
сти произойдет в случае применения функции рагзеТгЛ 
к числу с плавающей запятой или к соответствующей 
строке В то же время эти функции можно использовать 
для преобразования в числа строк, представляющих 
собой значения в восьмеричном или шестнадцатерич¬ 
ном формате, а также іисла с плавающей запятой в ло¬ 
гарифмическом формате. 


Объекты и массивы данных 

Массивы данных используются во многих языках программирова¬ 
ния. Идея состоит в том, чтобы собрать несколько однотипных или 
взаимосвязанных значений иод одним именем, вместо создания мно¬ 
жества переменных. Объекты представляют собой более сложно орга¬ 
низованные массивы данных, поскольку они кроме значений разных 
типов содержат также методы обработки этих значений. 

Методами называются функции, являющиеся частью 
объекта. Вызов метода происходит следующим обра¬ 
зом: имя_о6ъекта . метод(). Как видите, с методами 
вам уже приходилось иметь дело, например с методом 
мгіЬе, который принадлежит объекту босшпепс. 

Но в ДаѵаЗсгірІ все переменные, даже самые простые, являются 
объектами со своими методами (в частности метод То8і:г іпд. с кото¬ 
рым вы познакомились выше). Массивы данных ДаѵаЗсгірТ также 
являются одним из типов встроенных объектов. ^ѵа8сгірі содер¬ 
жит обширную коллекцию встроенных объектов; для их описания и 
описания всех их методов потребуется отдельная книга. В этой книге 
вы познакомитесь с общими принципами использования некоторых 
встроенных объектов: МаТЪ и БСгіпд (далее в этой главе, в разде¬ 
ле «Выражения и операции»), а также с объектом Оаге (в главе 6). 
Перечисленные объекты содержат коллекции полезных методов, ко¬ 
торые можно использовать для вычислений и обработки данных. 

Объекты массивов и словареіі, которые мы рассмотрим в этом раз¬ 
деле, кроме предоставления полезных методов, позволяют создавать 
коллекции данных. 
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Общим для объектов ,|аѵа5сгірІ является использование ключе¬ 
вого слова пей при создании нового энземп іяра объекта. Команда 
Ьуреоі, вызванная для экземпляра объекта, возвращает значение 

оЬіес!:. 

Массивы 

Массивы содержат коллекции взаимосвязанных данных. В ^ѵа- 
Зсгірі. в отличие от многих других языков программирования, один 
массив может содержать данные разных типов. Можно создать мас¬ 
сив значений, а также массивы объектов других типов (в том числе 
и массивов — многомерные массивы ), массивы методов, гиперссылок, 
файлов мультимедиа и т.д. В этом разделе мы рассмотрим общие 
принципы создания и использования массивов. Пример массива зву¬ 
ковых файлов будет рассмотрен в главе 6. 

Создание и использование массивов 

Массив представляет собой особый тип переменной, содержа¬ 
щей не одно, а много значений, называемых элементами массива. 
Элементы массива хранятся в той последовательности, в которой они 
добавлялись в массив. К любому элементу можно обратиться по име¬ 
ни массива, указав порядковый номер элемента, называемый индек¬ 
сом. Синтаксис обращения следующий: 
элемент = имя_массива[индекс]; 

Нумерация элементов массива начинается с нуля. Таким образом: 
лервый_эдемент = имя__массива [ 0 ] ; 

последний_элемент = имя_массива[размер_массива - 1 ]; 

Индекс может быть задан числом, целочисленной переменной или 
функцией, возвращающей целочисленное значение. 

/ѵЛ Установка в индексе числа, превышающего размер мас- 

Чвнимание^ сива, приведет к ошибке выполнения сценария. Чаще 
/ 1 всего ошибка происходит при обращении к последнему 

элементу массива, когда в качестве индекса используют 
® значение размера массива, в то время как индекс по¬ 
следнего элемента на единицу меньше. 

Новый массив создается с помощью ключевого слова нем: 
аггауі = пей Аггау (# ), где # — размер массива. 
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Размер массива указывает число элементов массива. 
Так, в строке аггауі = пеѵ? Аггау (10) создается мае 
сив из десяти элементов с аггауі [ 0 ] по аггауі [ 9 ]. 



При создании объектов в .ІаѵаБсгірІ используется сле¬ 
дующий синтаксис: пей класс_о6ъекта (аргументы). 
Несколько напоминает вызов функции, не так ли? Дей¬ 
ствительно, эту функцию называют конструктором клас¬ 
са . Обратите внимание на то, что имя конструктора 
класса чувствительно к регистру букв. 


При создании массива можно задать его размер. Впрочем, размер 
массива очень просто изменить в ходе выполнения сценария. Если 
размер не указан, создастся пустой массив. 

Следующий этап состоит в заполнении элементов массива данны¬ 
ми, как в следующем примере: 
июпЬЬв = пем Аггау{12); 
гпопСЪбЕО] = "январь"; 
топбЬе[1] = "февраль"; 

Мы заполнили два первых элемента массива названиями месяцев 
года. Остальные 10 элементов остались пустыми. Если сейчас с по¬ 
мощью функции югібе или аіегр мы выведем содержимое третьего 
элемента, птопТЪз [ 2 ], то отобразится значение ипбеііпеб. 

Существует другой способ создания массива одновременно с при¬ 
своением значений всем его элементам: 


топГЬз = пем Аггау("январь", "февраль", "март", "апрель", 
"май", "июнь", "июль", "август", "сентябрь", "октябрь", 
"ноябрь") ; 

Одной строкой мы создали массив месяцев года из 11 элемен¬ 
тов, по оплошности пропустив "декабрь". Позже мы исправим эту 
ошибку. 


Методы массивов 

Массив, как любой другой стандартный объект ^ѵа$сгірІ, содер¬ 
жит подборку полезных методов. Методы массивов предназначены 
для преобразования массива в строку и для изменения порядка сле¬ 


дования элементов. 
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Изменение размера массива и порядка 

следования элементов 

Увеличить размер массива очень просто. Присвойте значение эле¬ 
менту с индексом, превышающим текущий размер массива. Массив 
автоматически будет увеличен до элемента с максимальным индек¬ 
сом. Например, в следующем примере создается массив из 10 элемен¬ 
тов, причем значение присвоено только последнему элементу, 
аггауі = пем Аггау{); 

аггау1[9] = "значение последнего элемента"; 

Все остальные элементы массива остались неопределенными. 

Значение размера массива хранится в переменной ІепдЫі, встро¬ 
енной в объект массива. В любой момент мы можем определить теку¬ 
щий размер массива и использовать это значение, например вывести 
в окне сообщения: 
а1егС(топЬЬ ЛепдСЬ); 

Обратите внимание на то, что ІепдьЪ — это не метод, 
а имя переменной. Переменные, встроенные в объект, 
называются переменными-членами или свойствами 
объекта. В переменной Іепд^Ь хранится информация о 
числе элементов массива Максимальный индекс мас¬ 
сива можно вычислить так: 
шах_іпйех = имя„массива . ІепдСЬ - 1; 

Объект Аггау содержит ряд методов, которые позволяют изме¬ 
нять структуру массивов: 

♦ сопсаъ (массив2) объединяет два массива и возвращает но¬ 
вый массив, в котором элементы массива 2 следуют за элемен¬ 
тами исходного; 

♦ віісе (индекс 1,индекс2) — возвращает часть массива от эле¬ 
мента с индексом 1 до элемента с индексом 2, не включая его 
(чтобы скопировать массив до конца, просто пропустите вто¬ 
рой аргумент); 

♦ вріісе (индекс1,индекс2) работает так же, как и предыду¬ 
щий метод, но извлекаемый подмассив удаляется из исходного 
массива; 

♦ ривЫзначение) добавляет новый элемент в конец массива; 

♦ рор() возвращает последний элемент и удаляет его из 
массива; 
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♦ аЫГЪ () — возвращает первый элемент и удаляет его из масс ива, 

♦ ипбЬі€Ъ( значение) — добавляет новый элемент в начало 
массива; 

♦ геѵегвеО инвертирует порядок следования элементов в 
массиве; 

♦ вогь () — сортирует элементы массива в алфавитном порядке. 

При сортировке текстовых элементов массива следует 
учесть, что на нее повлияет регистр букв 


Преобразование массива в строку и поиск элементов 

Для преобразования массива в строку можно использовать два 
метода: еоЗСгіпд {) и _іоіп( ). Оба метода по умолчанию возвращают 
список элементов, разделенных запятыми (рис. 4.4). Метод зоіп( ) 
позволяет установить другой разделитель, указав его в аргументе 
функции, например пюпСЬз. з оіп ('; '). 

Методы преобразования массива в строку элементов можно ис¬ 
пользовать для быстрого поиска элемента в массиве. Предположим, у 
вас есть огромный массив элементов, которые добавлялись в массив в 
неизвестной для вас последовательности. Как определить индекс ис¬ 
комого элемента? Один подход состоит в использовании цикла €ог 
(см. главу 5), в котором последовательно каждый элемент массива 
будет сравниваться с искомым. Этот поиск займет много времени, 
особенно если вам нужно определить индексы многих элементов. 
Быстрее будет работать программа поиска элементов в строке тек¬ 
ста. Пример такой программы реализован в листинге 4.3 в функции 
І:іпс1_топеЪ. В этой функции используются пока еще не известные 
вам методы строковых объектов, с которыми вы по¬ 
знакомитесь далее в этой главе, в разделе «Строковые 
операции». 

Использование методов объекта Аггау показано в 
О листинге 4.3. 

Листинг 4.3. Создание массива данных и управление им 

<нтмь> 

<НЕАБ> 

<ТІТЬЕ>Массив</ТІТЦЕ> 
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<5СКІРТ> 

// Поиск элемента в массиве 
іипсбіоп ііп(Э._топіЬ( } { 

топбЪ = рготрб("Введите месяц: "); 
іі (топЫі) { 
ѵаг і = МаМ; 

Іізб = топбЬзо оіп ("$"); 
ровіРіоп = Іізб ЛпбехОі (топСЬ); 
іі (ровіСіоп > -1) { 
ѵаг іпйех = 0; 

І1 (ровіьіоп) { 

зиЬ_1іві: = 1І8Ь.8иЬ8Ьгіпд(0,рО8ІСіоп) ; 
виЬ_аггау = БиЪ_1І5б. Брііі ("$"); 
іпйех = виЬ_аггау.ІепдІЬ - 1; 

} 

аіегб{ "Месяц " + топсЬв[іп<Зех] + " в массиве 
находится под индексом " + ігкЗех) ; 

} 

еіве 

а1егб( "Месяц " + топбЬ + " в массиве 
отсутствует" } 

} 

} 

</5СКІРТ> 

</НЕАБ> 

<ВСЮУ> 

<ЗСКІРТ> 

// Создаем массив 

топбЪз = пей Аггау("январь", "февраль", "март", "апрель", 
"май", "июнь", "июль", "август", "сентябрь", "октябрь", 
"ноябрь"); 

йосшпепб. мгіЬе ("Исходный массив: ", шопбЬе. ІоЗбгіпд (), 
"<ВКхВК>") ; 

// Добавляем в массив новый элемент 
шопбЬб [Щ = " декабрь"; 

босшпепб. шгібе ("Новый массив: ■, топбЪз.з оіп ("; "}, 

"<ВКхВК>") ; 

// Извлекаем два новых массива и объединяем их 
зргіпд_топбЬ8 = топЫіз . зіісе (2,5); 
аибшпп_шопбЬ8 = іпоплЬз . БІісе (8,11) ? 
оііееаБОп = зргіпд_топЫіБ .сопсаі (аибшпп_шопі:Ь8); 
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йоситепр.ш:ісе( "Весенние месяцы: ", 8ргіпд__топРЙБ.;зоігі ("; "), 
"<ВКхВК>") ; 

йосішіепР .мгісе< "Осенние месяцы: ", аиРшш_топРІ , із. зоіп ("; "), 
■<ВКхВК>"); 

йосигпепР.кгіРе( "Весенние и осенние месяцы: ", оРЕееаеоп. 

] оіп ( " ; * ) , " <ВКхВЕ> " ) ; 

// Изменение порядка следования элементов 
шопЫіб . геѵегее (}; 

йосшпепр .ѵлгіре("Инвертированный список : ", гпопРііб. :оі.п{"; "), 
"<ВКхВК>") ; 
гпопРЪб. еогС(); 

йосішіепР .мгі Ре ( "месяцы в алфавитном порядке: ", іпопРЪб. 
доіп("; "), "<ВКхВК>"); 

</5СЕІРТ> 

<РОКМ> 

<ПИ*ЦТ ТУРЕ- 'ЪиРРоп' ѴАИШ= ■ Найди месяц' ОЫСЫСК= • Ріпй_ 
топрЬ ()'> 

</РОЕМ> 

<ВОВУ> 

</НТМЬ> 

В сценарии основного раздела ДѴеЬ-страницы создается массив 
шопРІі с названиями месяцев. Список месяцев выводится на страницу 
в виде строки текста с помощью методов йоситепР .мгіРе () и топРЬ. 
РоЗРгіпд () . Затем мы добавляем в массив еще один месяц и выводим 
на экран новый список с помощью метода іоіп. Далее демонстриру¬ 
ется использование методов зіісе и сопсаР для разделения и объе¬ 
динения массивов, и методов геѵегзе и богР — для изменения по¬ 
рядка элементов в массиве. Результат выполнения сценария показан 
на рис. 4.4. 

Сортировка массива изменила начальный порядок следования ме¬ 
сяцев (см. рис. 4.4). Чтобы определить новый индекс месяца, на \ѴеЬ- 
страницу добавлена кнопка Найди месяц. Эта кнопка запускает на вы¬ 
полнение функцию Ріпй__пюпРЬ, определенную в сценарии в разделе 
заголовка. Функция открывает диалоговое окно для ввода названия 
месяца, после чего определяет индекс месяца в массиве и возвращает 
это значение в окне сообщения (см. рис. 4.4). В коде функции исполь¬ 
зовались методы строчных объектов, с которыми мы познакомимся 
ниже в этой главе. 





Рис. 4.4. Использование массивов в сценарии 


Стандартные массивы ѴѴеЬ-страницы 

Вам будет полезно узнать, что любая ЛѴеЬ-страница уже содер¬ 
жит ряд стандартных встроенных массивов, в которых представле¬ 
ны коллекции ее элементов. Имена массивов и их иерархия показа¬ 
ны на рис. 4.5. 

Элементы \ѴеЬ-страницы автоматически добавляются в соответ¬ 
ствующие массивы в той последовательности, в которой они создаются 
в коде НТМЬ. Все массивы элементов принадлежат объекту йосшпепС 
(соответственно, к ним можно обратиться: йосшпепе. имя_ма с сива ), 
но к массиву рамок Егашез можно обратиться непосредственно из 
документа ѵѵіпбош: имя_ркна. іігатев [ 0 ]. 

Удобство использования массивов элементов состоит в том, что 
с их помощью можно обратиться к любому элементу \ѴеЪ- страницы, 
даже если для него не было задано уникальное имя. 
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Рис. 43. Стандартные массивы элементов Ѵ/еЬ-страницы 


/’ д Обращение к элементам МеЬ-страницы по именам все 

Г На заметку] же предпочтительнее, так как число и порядок элемен 
V У тов в массиве могут измениться в результате ди нам иче 

0 0 ского изменения самой ѴѴеЬ- страницы. 

Наиболее часто используются следующие массивы элементов: 

♦ аіі — все элементы \ѴеЬ-страницы; 

♦ Ггатев — рамки; 

♦ ітадев - рисунки; 

♦ Ііпкв — гиперссылки; 
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♦ Іопшэ формы; 

♦ еіетепъа — элементы формы. 

Чтобы на практике показать примеры обращения к 

Ѳ массивам элементов, давайте воспользуемся ранее 
созданной нами \ѴеЬ-страницей зоопарка (см. лис¬ 
тинг 2.10 и рис. 2.18). Усложним страницу, добавив 
Оф в нее две формы и сценарий функции для кнопки. 
Дополнительный код показан в листинге 4.4. 

Листинг 4.4. Пример обращения к массивам 
элементов ѴѴеЬ-страницы 

<нтмь> 

<НЕАБ> 

<5СКІРТ> 

РипсСіоп апаІувеО { 

МіпКерогТ = міпбом.ореп("", ,, ","місіІ:Ь=250 # ЬеідЬі:=100"); 
МіпЕерогІ: .боситепС .мгіТеі "Всего элементов на странице: ", 
боситепС.аІІЛепдТЪ, "<ВК>"); 

МіпКерогі:. босшпеШ; .мгіЬе ( "рисунков : ", боситепС.. ішадез. 
ІепдСЪ, "<ВК>"); 

ИіпКерогС. боситепТ .мгіге( "форм: ", боситепТ .Соппв. 

1епдС.Ь, " <ВК>"} ; 

ИіпКерогТ .боситепТ .ѵлгі Те ( "элементов в первой форме: ", 
босішепт. Еогтз [ 0 ] . еІетепТз. ІепдСЬ, " <ВК> "} ; 

} 

</5СЕІРТ> 

</НЕАБ> 

<В0БУ> 

код из листинга 2.10 
<Р0КМ> 

<Н2>Зарегистрируйтесь на нашем сервере</Н2> 

ФамилижІЫРБТ ТУРЕ= ' ГехТ ' > Имж^ШРИТ ТУРЕ= 1 ТехС ' ><ВК> 
ОтчествосШРІІТ ТУРЕ='Техі: , ><ВЕ> 

<ШРБТ ТУРЕ=' зиЪтіТ' > 

</Р0КМ> 

<РОКМ> 

сШРБТ ТУРЕ="Ьш: топ" ѴАШЕ= “Сколько на странице элементов" 
ОЫСЫСК= " апаіуве О " >< /р> 

</Р0КМ> 
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</ВСЮУ> 

</НТМЬ> 

На страницу добавлена кнопка Сколько на странице элементов, за¬ 
пускающая на выполнение функцию апаіузе, определение которой 
находится в заголовке \ѴеЬ-страницы. С помощью функции мы опре¬ 
деляем общее число элементов на странице, число рисунков, форм и 
элементов управления в первой форме. Результаты выводятся в ново* 
окно обозревателя, как показано на рис. 4.6. 



I магафке сулФк ** Скисла Д*фл»: л с«мг-*гаі ’ 

Е : т ОДрящ >в и«**т8 я* *****и®е »»?<доз 

| ******* * і*>*&*«. 



Цхгист()й(п^сь Ий нлше%і сгригре 


\ Жт 


ч 

[ Омснь».... 



Ъ<-,ъ< >віі*гжт<* на пракгог 3^ 


| 


і?] 

! 

+ 'Ѵ* ' 


\ 1 ^япмгпівпрвмм* 3«М».ТСв 1 

-*•*—. 

н 

* 1 


у’ 



Рис. 4.6. Определение числа элементов на странице 


Словари 

Словари, как и массивы, используются для хранения коллекций 
данных. Но в отличие от массивов значения в словарях сохраняются 
не под номерами, а под уникальными именами, называемыми ключа¬ 
ми. Ниже для сравнения показаны обращения к элементу мас сива и 
элементу словаря: 
зна чение имя_массива [ индекс ] ; 

значение = имя__словаря( * ключ ’); 
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Словарь является встроенным элементом АсІіѵеХ. доступным для 
использования в сценариях ^ѵаЗсгірІ. Синтаксис создания нового 
экземпляра АсГіѵеХ несколько отличается от знакомого вам синтак¬ 
сиса создания объектов ^ѵа8сгір(: 

КемБісСіопагу = пеѵ? АсТіѵеХОЪзесІ ( "ЗсгірГіпд.БісТіопагу" ); 

Новый словарь создается пустым. Для заполнения его данными 
используется метод Асій. Ниже показан пример создания словаря за¬ 
писной книжки с днями рождений: 

йісВігСІкЗауе = пем АсСіѵеХОЪзееС ("ЗсгірІіпд.ОісІіопагу"); 
дісВіг^ЬсІауз .АсМ( "Света" , "12.05.1982"); 
дісВігтМауз.АскМ "Лена", "07.11.1985") ; 
йісВігПійауз. Айй{ и Юяя", “26.02.1983"); 

В метод Айй передается пара аргументов — ключ и значение. 
Совсем не обязательно, чтобы это были строки текста. В качестве 
ключа и значения можно использовать данные любого типа, в том 
числе массивы, словари и другие объекты, хотя для ключей больше 
подходят строки текста. Вместо значений в качестве аргументов мето¬ 
ду Айй можно передавать переменные и вызовы функций, возвращаю¬ 
щих ненулевые значения. 

Оба элемента, ключ и значение, могут быть изменены в ходе вы¬ 
полнения сценария следующим образом: 

<ЗісВігі;Ъсіау5.ІСет( "Лена") = "08.31.1985"; // изменяем значение 
йісВігЫкіауз .Кеу("Лена") = "Лена П."; // изменяем ключ 

Так же, как и в случае использования массивов, мы можем опреде¬ 
лить размер словаря - количество пар ключ-значение в словаре. Но 
вместо Іепдсіі в словарях используется свойство СоипЬ: 
віге = бісВігЛМауз.Соипб; 

Рассмотрим некоторые полезные методы словарей: 

♦ ЕхівСв ( "ключ" ) — проверяет наличие ключа в словаре; 

♦ іЬешв () — возвращает массив значений словаря; 

♦ Кеув () возвращает массив ключей словаря; 

♦ Кетоѵе ( "ключ") — удаляет из словаря пару ключ-значение; 

♦ КетоѵеАІК) — удаляет из словаря все элементы. 
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В действительности извлечение из словарей массивов 
значений и ключей происходит не так просто. Это связа¬ 
но с тем, что объекты АсТіѵеХ не являются стандартными 
элементами языка .ІаѵаБсгірі. Чтобы адаптировать мас¬ 
сивы элементов к стандартам .ІаѵаБспрІ используется 


следующий синтаксис 


ѵаг КеуАггау = (пей ѴВАггау (имя_словаря.Кеуз О ) . 
ЬоАггау і ). 

ѵаг ІЬешАггау (пен ѴВАггау ( имя_словаря . ІСетз ()). 
СоАггау(); 


Выражения и операции 

Сценарии в ЛѴеЪ-страницах часто используют для того, чтобы 
произвести анализ данных, введенных пользователем, и возвратить 
результат. Например, можно рассчитать размер текущего платежа по 
кредиту или проверить правильность данных в полях формы, приме¬ 
няя для этого методы текстового анализа. Для выполнения операций 
с переменными используются операторы языка ДаѵаЗсгірІ. 

Выделяют следующие группы операторов: 

♦ арифметические; 

♦ присваивания; 

♦ сравнения; 

♦ логические; 

♦ строковые. 

Вместо того чтобы вновь и вновь создавать функции 
для выполнения рутинных операций, воспользуйтесь 
коллекциями методов в стандартных объектах, доступ 
ных для использования в ]аѵа$сгірр Ниже мы рассмо 
трим применение объекта Ма^л для выполнения мате¬ 
матических вычислений и объекта 8Ьгіпд — для работы 
со строками текста. 

Арифметические операции 

В сценариях ^ѵа$сгірі можно выполнять простые и довольно 
сложные вычисления с помощью стандартных операторов ^ѵа8сгірІ 
а также г помощью методов объекта; іа ПЬ. Арифметические операторы 





Работа с данными в сценариях Іаѵа5сгір1 


135 


применяются для создания выражений, в которых помимо операторов 
используются переменные (целочисленные и с плавающей запятой) 
и собственно числовые значения, называемые литералами. Обычно 
выражение также содержит оператор присваивания, который присва¬ 
ивает результат вычисления, находящийся справа от него, перемен¬ 
ной, находящейся слева. Пример выражения показан на рис. 4.7. 

Переменная, которой 

присваивается результат Литерал 

вычисления | Переменная | 

ѵаг Ь = а + 24 

I і 

Оператор Оператор 
присваивания суммирования 

Рис. 4.7. Пример арифметического выра¬ 
жения о сценарии ]аѵа5сгір( 

Выполнение базовых математических операций 

В ДаѵаЗсгірІ используются 5 арифметических операторов: 

♦ * — суммирования; 

♦ — вылетания; 

♦ * — умножения; 

♦ / — деления; 

♦ % — вычисление модуля. 

Первые четыре оператора не требуют объяснений. Оператор вы¬ 
числения модуля используется для извлечения остатка от деления. 
Например, в результате выполнения следующего сценария: 
той = 14 % 2; 

в переменной той будет сохранено значение 2. Действительно, при 
делении 14 на 2 получаем число 3 и 2 в остатке. Именно остаток и 
возвращает оператор %. 

Операторы инкремента 

В сценариях ^ѵаЗсгірС часто используются счетчики — пере¬ 
менные, значение которых изменяется на единицу каждый раз при 
выполнении определенной операции. Например, можно создать на 
\ѴеЬ-странице счетчик щелчков на кнопке или на гиперссылке. Часто 
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счетчики применяются в циклах (см. главу 5). Создать счетчик очень 
просто: 

// Начальное значение счетчика 
ѵаг соипб =0; 

... конструкция с оператором цикла или код функции обработки 
события 

// инкрементация счетчика 
сошіС = сошЛ + 1; 

Чтобы упростить запись, в ^ѵаЗсгірі используются операторы ин¬ 
кремента: 

♦ соипб++г увеличивает значение переменной соипС на еди¬ 
ницу; 

♦ соипЪ —; - уменьшает значение переменной соипТ на единицу. 
В данном случае не важно, находится оператор инкремента до 

или после переменной. Конструкции ттсоипс и сошіЬ++ дадут оди¬ 
наковый результат. Но положение оператора инкремента становится 
важным, если он используется в сочетании с оператором присваива¬ 
ния. Рассмотрим следующие примеры: 

пшпі = ь+соипб; // значение соипб увеличивается на 1 и 
// присваивается переменной піші 
пшп2 - СОІШР++; // значение соипЬ присваивается переменной 
// пші2, после чего увеличивается на 1 

Приоритеты выполнения операторов 

Выше мы рассмотрели примеры простейших вычислений, в ко¬ 
торых использовался только один оператор. Но в ЗаѵаЗсгірІ можно 
создавать сложные математические выражения, содержащие* много 
разных операторов. В этом случае возникает вопрос, в какой после¬ 
довательности будут выполняться операции. Приоритеты выполне¬ 
ния операторов были распределены в соответствии с общими прави¬ 
лами математики, известными вам еще со школы. Например, вполне 
очевидно, что в выражении 4 + 8/2 сначала следует разделить 8 на 2, 
а затем прибавить результат деления к 4. Если мы прибавим 4 к 8, а 
затем сумму разделим на 2, результат будет совершенно иным. Но 
если именно это нам и нужно, то выражение следует записать иначе: 
(4 + 8)/2. 

Именно в такой последовательности будут выполняться операции 
в ^ѵа8сгірІ, поскольку операторы умножения и деления имеют более 
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высокий приоритет, чем операторы суммирования и вычитания. Но 
символы скобок в коде изменяют распределение приоритетов, застав¬ 
ляя программу выполнять в первую очередь действия в скобках. 

Объект МаіГі 

Объект МаСЬ поддерживается всеми обозревателями, поэтому мож¬ 
но смело использовать коллекцию методов и констант этого объекта 
для выполнения вычислений. При этом не нужно создавать объект 
МаТЬ или добавлять его в сценарии, он всегда доступен по умол¬ 
чанию. Например, чтобы найти квадратный корень от числа в пере¬ 
менной ТѴаІ, выполните следующее: 
ѵаг гезиІТ = МаЫі.Бф± (ЕѴаІ) ; 

Польза от применения объекта МасЬ очевидна уже по этому при¬ 
меру, так как ^ѵаЗсгірТ не содержит операторов для извлечения ква¬ 
дратного корня, а написать самостоятельно такую программу будет 
весьма затруднительно. Давайте рассмотрим ресурсы объекта МаСЬ. 

Константы 

В вычислениях нам часто приходится использовать константы. 


например число л: (пи) или число Авогадро (количество молекул 
водном моле вещества). Первую константу вы найдете в объекте 
МаЬЬ, вторую, к сожалению, нет. Список констант небольшой, но по¬ 
лезный (табл. 4.2). 

Таблица 4.2. Математические константы объекта матъ 

Константа 

Описание 

Е 

Число е — основание натурального логарифма (= 2,72) 

Ш10 

Число Іп(10) = 2,3 

Ш2 

Число Іп(2) а 0,69 

ЬОСІОЕ 

Число Ід(е) = 0,43 

Ш32Е 

Число Іод 2 (е) »1,44 

РІ 

Число 7г = 3,14 

30ЕТ1_2 

Квадратный корень от % * 0,71 

БСНТ2 

Квадратный корень от 2 = 1,41 


Методы 

Коллекция методов, предназначенных для выполнения математи¬ 
ческих операций, представлена в табл. 4.3. 
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Таблица 4.3. Методы объекта маЪЪ 

Метод 

Описание 

Тригонометрические методы 

аЪз(х) 

асое(х) 

азіп(х) 

аГап{х) 

СОБ(X) 

5ІП{Х) 

ііап(х) 

Возвращает абсолютное (положительное) значение от 
числа х 

Возвращает арккосинус числа х (-1 < х < 1) 

Возвращает арксинус числа х (-1 < х < 1) 

Возвращает арктангенс числа х 

Возвращает косинус числа х 

Возвращает синус числа х 

Возвращает тангенс числа х 

Методы округления 

сеіі (х) 

ііоог (х) 

гоипй(х) 

Возвращает ближайшее целое число, которое меньше 
или равно х 

Возвращает ближайшее целое число, которое больше 
или равно х 

Возвращает целое число, ближайшее 
кх(МасЬ.гоипб(1.5) =2) 

Методы сравнения 

тах(х,у) 

тіх(х,у) 

Возвращает большее из двух чисел 

Возвращает меньшее из двух чисел 

Методы вычислений 

ехр(х) 

1од(х) 

роѵ(х,у) 

ЕдгС (х) 

Возвращает е' 

Возвращает натуральный логарифм Іп(х) 

Возвращает х* 

Возвращает квадратный корень отх 


Генератор случайных чисел 

Объект МасЬ содержит рандомайзер функцию, возвращающую 
случайное число. Вызов генератора случайных чисел выполняется 
следующим образом: 
ѵаг гапб = МаЫі .гапбот(); 

Переменной гапб будет присвоено случайное число с плавающей 
запятой в диапазоне от 0 до 1. Используя различные ухищрения, можно 
получить числа в любом диапазоне. Например, ниже показана прог¬ 
раммная модель игральной кости, возвращающей целое число от 1 до 6: 
ѵаг гапб = МаСЬ.€1оог(5.0*МаСй.гапбот() + 0.5); 
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Операции присваивания 

Оператор присваивания = уже использовался нами ранее во мно¬ 
гих листингах. Но в ІаѵаЗсгірІ есть ряд дополнительных операторов 
присваивания, полезных в тех случаях, когда переменной присваива¬ 
ется новое значение исходя из текущего, т.е. одна и та же переменная 
находится слева и справа от оператора присваивания, как в следую¬ 
щем примере: 
пшп = пито + 5; 

Это выражение можно упростить: 
пшп += 5; 

Полный список операторов присваивания показан в табл. 4.4. 

Таблица 4.4. Операторы присваивания 
Оператор Описание 

х = у Присваивает переменной х значение переменной у 
х += у Увеличивает значение переменной хна значение переменной у 
х -= у Уменьшает значение переменной х на значение переменной у 
х *= у Увеличивает значение переменной х в у раз 
х /= у Уменьшает значение переменной х в у раз 

х %— у Присваивает переменной х остаток от деления значения пере- 
_менной х на значение переменной у__ 


Операции сравнения 

В том случае, если нужно выяснить отношения равенства или 
отличий значений в двух переменных, применяйте операторы 
сравнения: 

♦ == - равенство; 

♦ 1 « — неравенство; 

♦ > — больше; 

♦ >= — больше или равно; 

♦ < — меньше; 

♦ <= — меньше или равно. 

Все операторы сравнения возвращают логические значения Сгие 
(истинно) и Еаізе (ложно). Например, в выражении 
ѵаг ЪѴаІ = 5 == 3; 
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переменной ЪѴаІ будет присвоено значение іаіве. Чаще всего опера¬ 
торы сравнения используются для проверки условия в конструкции 
с оператором і I (подробнее об управлении выполнением сценария в 
зависимости от выполнения условия рассказывается в главе 5). 

В синтаксисе операторов сравнения часто возникают 
ошибки. Обратите внимание на то, что оператор равен¬ 
ства содержит два символа равенства ( =), тогда как 
один символ равенства имеет в Іаѵа^сгірі совершенно 
иной смысл (см. выше раздел «Операции присваива¬ 
ния») Следует также помнить, что в операторах нера¬ 
венства, больше или равно и меньше или равно символ 
равенства находится справа. Комбинации символов =!, 

> и -< вызовут ошибку. 

Строковые операции 

Со строками текста на ЛѴеЬ-страницах приходится работать даже 
чаще, чем е числовыми значениями. В связи с этим в ^ѵаЗсгірІ пре¬ 
дусмотрен обширный набор средств для анализа текста и манипуля¬ 
ций со строками. Как вы увидите, к строковым переменным можно 
применять даже некоторые математические операторы, с которыми 
вы познакомились выше. Набор удобных методов для работы с тек¬ 
стом предоставляет объект БСгіпд. 

Конкатенация строк и полиморфизм операторов 

Чаще всего в сценариях приходится объединять фрагменты тек¬ 
ста, хранящиеся в разных переменных, в одну фразу для вывода ее в 
окне обозревателя. Процесс объединения строк называется конкате¬ 
нацией. Проще всего это сделать с помощью оператора суммирования 
«+», с которым вы познакомились выше, в разделе «Выполнение базо¬ 
вых математических операций». Рассмотрим пример в листинге 4.5. 

Листинг 4.5. Конкатенация строк с помощью оператора 
суммирования 

<5СКІРТ> 

зСгІ = "Глубокоуважаемый "? 

зСг2 = ргошрс("Введите имя и фамилию"); 

іі: (бСг2) 

<Зоситепб.игіЬе(8Пг1 + зсг2 + 

</5СКІРТ> 
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Сценарий выводит приветственную строку, которую можно ис¬ 
пользовать в начале делового письма. Сначала создается строковая 
переменная зГгІ с текстом "Глубокоуважаемый ". Затем нужно вве¬ 
сти имя и фамилию человека, к которому мы обращаемся. Программа 
открывает диалоговое окно с просьбой к пользователю ввести требуе¬ 
мую информацию. Введенная строка сохраняется в переменной зСг2. 
Далее программа выводит текст на экран с помощью метода игіГе, 
в аргументе которого происходит суммирование строк. Результат 
показан на рис. 4.8. 



Для конкатенации строк мы использовали оператор суммирова¬ 
ния, который ранее применяли для выполнения сложения двух чис¬ 
ловых переменных. Такое свойство операторов, при котором результат 
их выполнения зависит от типа переменных, к которым они приме¬ 
няются, называется полиморфизмом операторов. К полиморфизму 
также можно отнести автоматическое изменение оператором типа 
одной из переменных, чтобы избежать возникновения конфликта. 
Рассмотрим следующее выражение: 
ѵаі = 3 + "г**; 

Как вы думаете, какой результат будет занесен в переменную ѵаі? 
Возможно, вас удивит, когда функция аІегГ (ѵаі ) ; выведет в окне 
сообщения значение 32. Все дело в том, что если одна из переменных 
оператора суммирования окажется строкой текста, даже при условии, 
что она содержит цифру, вторая переменная автоматически преоб¬ 
разуется в строку и выполняется конкатенация строк. Такой же ре¬ 
зультат получится в выражении: 
ѵаі = 3; 
ѵаі += "2"; 
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В<ч остальные математические операторы, *, /, %, действуют 
в противоположном направлении: пытаются преобразовать строку 
в число. Если это не удается, выражение возвращает іначение N319. 
Рассмотрим следующие примеры: 
ѵаі =3 - "2"; // в результате получаем 1 
ѵаі = "в" * 3; // в результате получаем КаЫ 

Объект Бігіпд 

Все элементы текста Ѵ/еЪ-страницы и текстовые переменные, 
включая содержимое текстовых нолей, являются экземплярами (объек¬ 
тами) класса Збгіпд. В связи с этим к методам класса Збгіпд можно 
обращаться напрямую: строковая_переменная. метод { аргументы). 

Все объекты класса Збгіпд содержат переменную-член ІепдбЪ, 
в которой хранится информация о длине строки — числе символов, 
включая пробелы. Попробуйте ввести следующий код: 

5 Ѵаі = "Привет!"; 
аіегб(зѴаІ . ІепдбЬ ) ; 

В данном случае сценарий покажет в окне сообщения число 7. 
Объекты Збг іпд содержат много методов, полезных для работы со 
строками текста, часть которых представлена в табл. 4.5. 

Таблица 4.5. Методы объекта Вбгіпд 

Метод Описание 

Методы манипуляций со строками 

сопсаб(збг2, вбгЗ , ...) Последовательно конкатенирует строки в 
списке аргументов со строкой, к которой 
был вызван метод, например: 
Ббг1.сопсаб{5бг2, БбгЗ, збг4); 
врііб {" разделитель ”) Разбивает строку на массив подстрок по 

позициям заданного символа разделителя. 
Например: 

Б Ѵаі = "А,Б,В,Г"; 
зАггау = 8Ѵа1.зрііб (","); 

Йосшпепб. ѵлгібе (зАггау[0]); // Выведет 
букву "А" 

Йосишепб. игі бе(зАггау[1]); // Выведет 
букву "В" 

боситепб .мгібе {зАггау. ІепдбЬ ); // 
Выведет 4 
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Окончание табл. 4.5 

Метод 

Описание 

зиЬбСг (позиция, длина) 

Возвращает подстроку, заданную позицией 
и длиной. Отсчет позиций начинается с 0 

виЪвЬгіпд (позиция, по- 

Возвращает подстроку, заданную позици- 

зиция) 

ями начала и конца подстроки в строке. 
Например: 


вѴаІ = "абвгде"; 

аіегѣ (8Ѵа1.еиЬз*:гіпд(1,3) ); II возвра¬ 
тит "6в" 

Методы поиска 

сЪагАС(позиция) 

Возвращает символ по указанной позиции 
в строке 

іпсІехОі: ( "подстрока") 

Возвращает позицию первого вхождения 
подстроки в строку 

ІазСІпйехОі: (" подстрока ") 

Возвращает позицию последнего вхождения 
подстроки в строку 

Методы форматирования 

ЪідО 

Увеличивает размер шрифта на единицу 
(см. ниже метод Еопгвіге) 

ЬоІсЦ ) 

Устанавливает полужирный шрифт 

^опСсоіогі 'цвет') 

Устанавливает цвет строки 

^опСвхге(’п') 

Устанавливает номер размера строки от 1 

ДО 7 

ібаІісеО 

Задает курсив 

Ііпк ( т 1 ) 

Создает из строки гиперссылку на заданный 
ІІКЬадрес или команды 'таіісо: ■ 
и ■ з'аѵавсгірТ: 1 

зпіаіі () 

Уменьшает размер шрифта на единицу 

вЬгікеО 

Перечеркивает текст 



Все перечисленные выше методы форматирования тек¬ 
ста выполняются путем заключения строки в соответ¬ 
ствующие дескрипторы НТІУИ (см. главу 2). 



Ранее в листинге 4.3 мы создали функцию ЕіпсЦпоп- 
СЬ, в которой использовались методы объекта ЗГгіпд. 
Давайте подробно рассмотрим работу этой функции 
в листинге 4.6. 
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Листинг 4.6. Функция ііпй шопЫі 

ЕипсЬіоп Сіпй_шопі:Ь() { 
топЕЪ = рготрі("Введите месяц: 
іі (шопсЬ) { 
ѵаг і = ИаИ; 

1І8І = топс1і5.эоіп{ "$"}; 
розііііоп = ІізЪ.іпдехОІ(топіЬ); 

И (розіТіоп > -1) ( 
ѵаг ігхЗех = 0; 
іі (роБіііоп) { 

БиЬ_1І8С = 1ІБ(:.БиЪ5Ггіпд(0,розіеіоп) ; 
зиЪ__аггау = 5иЪ_1ізЪ. зрііі ("$"); 
іпйех = 5ідЬ_аггау. ІепдсЬ - 1; 

} 

аіегі{ "Месяц " + топііізііпйех] + " в массиве 
находится под индексом * + іпйех); 

} 

еізе 

аіегі( "Месяц " * топіЬ + " в массиве отсутствует") 

} 

) 

Идея состояла в том, чтобы с помощью функции ііпсЦтюпгЬ. оп¬ 
ределить индекс текстового элемента в массиве. Для этого мы пре¬ 
образовали массив в строку с помощью метода ;іоіп, установив в 
качестве разделителя символ доллара ($). (Мы специально выбрали 
символ, который не ожидали увидеть в строках нашего текста.) Затем 
с помощью метода іпйехОі определили позицию вхождения искомо¬ 
го слова в строке текста. Если искомое слово не обнаружено, метод 
іпйехОЕ возвращает значение -1. Убедившись с помощью оператора і і, 
что поиск завершился успехом, мы вырезаем часть строки от начала 


до позиции искомого слова, воспользовавшись для этого методом 
зиЪБігіпд. Полученную строку вновь преобразуем в массив с по¬ 
мощью метода врііъ, установив в качестве разделителя все тот же 
символ доллара. Нетрудно понять, что индекс искомого элемента в 



исходном массиве будет на единицу меньше размера 
нового урезанного массива. Результат выполнения 
функции был показан на рис. 4.4. 

Рассмотрим теперь пример форматирования текста с 
помощью методов объекта ЗЬгіпд (листинг 4.7). 
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Листинг 4.7. Изменение размера текста 

<ЗСКІРТ> 

ѵаг БѴаІ = "Установка размера шрифта"; 

Сог (і=1; і<-7 ; і++) 

йосшпепі:.мгіі:е{5Ѵа1.Еоп(:зІ2е(і) + ’<ВЕ>"); 

</5СКІРТ> 

В листинге 4.7 мы используем метод Еопізіге для установки раз¬ 
мера шрифта. Размер шрифта задается номером от 1 до 7. Как будет 
выглядеть текст на экране, зависит не только от номера шрифта, но и 
от установок параметров обозревателя. В листинге 4.7 мы выводим 
один и тот же текст с размером шрифта от 1 до 7. воспользовав¬ 
шись оператором цикла Еог. (Подробнее о циклах рассказывается 
в главе 5.) Результат показан на рис. 4.9. 


Экш* шктллЛМят.. 








Установки размера здрнфха 

Установка размера шрифта 

Установка размера шрифта 


Рис. 4.9■ Изменение размера шрифта с помощью метода 
ІіопСвіге 



Методы форматирования объекта ЗСгіпд добавляют 
дескрипторы в строку текста только в том случае, ес¬ 
ли текст выводится на экран с помощью метода ѵ/гісе. 
Если просто применить метод форматирования к стро¬ 
ковой переменной, результат не сохранится и никак не 
повлияет на формат текста при последующем выводе 
значения переменной на экран. 


Вышеуказанная проблема затрудняет установку для строки сразу 
нескольких параметров форматирования, например размера шрифта 
и курсива. 
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Эту проблему можно решить путем добавления не¬ 
обходимых дескрипторов непосредственно в строку 
текста. Например, добавим в листинг 4.7 следующую 
строку кода где-нибудь после создания переменной 
вѴаІ, но до цикла ёог: 


вѴаІ = "<І>" + зѴа! + "</І>" ; 


Результат показан на рис. 4.10. 


ЧИМ *** И<ф**«* 


Ф у '--' о д\ ?§ & /-'Гяюг ****** 0* $$ 

-*■' *ѵе - :%[§<-*г : ѵ *- * 

^*ммн /чгмфч* 

У>*ач^4р<і*-«ф4ЩН*фг}ѵ 

Успхшиишрспшра шрифта 
Установка размера шрифта 

Установка раз мера шрифта 


Рис. 4.10. Применение к тексту нескольких параметров 
форматирования 









Глава 5 

Управление ходом 
выполнения сценария 


В простейшем случае код сценария выполняется линейно от пер¬ 
вой до последней строки. Но даже в предыдущих главах книги, когда 
мы изучали базовые основы программирования на ^ѵаЗсгірІ, нам не 
всегда удавалось удержаться в пределах простой линейной програм¬ 
мы. Часто бывает необходимо разветвить программу на два альтерна¬ 
тивных кода (подпрограммы), каждый из которых выполняется толь¬ 
ко при определенном условии. Например, в случае показа диалоговых 
окон нужно выполнить анализ данных, введенных пользователем, и 
в зависимости от того, на какой кнопке диалогового окна был сделан 
щелчок, выбрать для исполнения требуемый код подпрограммы. 

Таким образом, нам нужно научиться решать с помощью сценари¬ 
ев следующие задачи: 

♦ определять выполнение условия, критического для последую¬ 
щего хода программы; 

♦ разветвлять программу на подпрограммы по факту выполне¬ 
ния условия; 

♦ устанавливать временной промежуток выполнения про¬ 
граммы; 

♦ организовывать повторное выполнение кода программы по 
циклу. 

В этой главе вы познакомитесь с операторами, применяемыми в 
^ѵа$сгір1; для управления ходом выполнения программы. 

Сравнение значений 

Чтобы установить момент выполнения условия, нужно сравнить 
текущее значение переменной со значением, характеризующим дан¬ 
ное условие. Выбор переменной и стандартного значения зависит ис¬ 
ключительно от логики процесса, который вы хотите смоделировать 
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с помощью сценария. Например, таким условием может быть зна¬ 
чение переменной-счетчика. Если доступ к странице заблокирован 
с помощью пароля, можно установить счетчик попыток пользовате¬ 
ля ввести пароль. Контрольное значение счетчика может равняться 
трем, пяти, во всяком случае меньше десяти, после чего проірамма 
блокирует доступ к серверу для этого пользователя. 

Условием выполнения программы может быть значение, возвра¬ 
щенное диалоговым окном. Если пользователь щелкнет на кноп¬ 
ке Отменить, функция диалогового окна возвратит значение Еаізе. 
Щелчок на кнопке ОК возврати г значение Сгие или текст, введенный 
пользователем в диалоговое окно. Условием может быть соответствие 
определенному формату значения, введенного в текстовое поле диа¬ 
логового окна и формы. (Подробно о формах и диалоговых окнах рас¬ 
сказывалось в главе 3.) 

Другим часто используемым условием может быть наличие или 
отсутствие на ЛУеЬ-страницеоп ределен ного элемента. Отсутстви ю 
элемента \ѴеЬ- стра 11 и цы соответствует значение КаЫ. Это же значение 
возвращается некоторыми функциями в случае возникновения в них 
ошибки. 

В этом разделе мы рассмотрим способы определения соответствия 
значения переменной определенному критерию. 

Что такое «истинно» и «ложно» 

С операторами сравнения вы познакомились в главе 4. В ^ѵа- 
$сгірі используются шесть операторов, =, ! =, <, < =, > и >=, с помощью 
которых можно установить равенство, неравенство или превыше¬ 
ние значения одной переменной относительно другой. Общим для 
всех этих операторов является то, что все они возвращают значения 
логического типа тгие (истинно) и ^аіве (ложно). Смысл этих значе¬ 
ний очевиден: выражение 5 == 5 возвратит сгие, тогда как выраже¬ 
ние 5 == 2 возвратит Іаізе. 

Переменные логического типа тесно связаны с переменными дру¬ 
гих типов и могут быть заменены ими в логических выражениях. Так, 
числовое значение 0 соответствует логическому Еаізе, в то время как 
все другие числа соответствуют значению І.гие. Если переменная со¬ 
держит в себе объект (элемент \ѴеЬ-страницы или текст), то в логи¬ 
ческом выражении эта переменная будет соответствовать значению 
Сгие, тогда как значение Как и пустая строка текста "" будут рассма¬ 
триваться как Саіяе. 
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С логическими переменными работают условный оператор іі 
и операторы циклов. Если условная переменная принимает значе¬ 
ние Ыгие, то оператор іі запускает на выполнение код одной под¬ 
программы, а если она принимает значение іаізе другой. Циклы 
выполняются до тех пор, пока условная переменная имеет значение 
Ыгие. Более подробно о циклах и конструкциях і Е-еІне вы узнаете 
далее в этой ілаве , 

Конструирование логических выражений 

С помощью оператора сравнения можно проверить значение одной 
переменной. Но иногда бывает необходимо в качестве условия уста¬ 
новить попадание значения переменной в определенный диапазон 
иди связать выполнение подпрограммы с несколькими условиями. 
В подобных случаях нужно применять логические выражения. Для 
создания таких выражений используются специальные логические 
операторы && (логическое и) и I I (логическое или). 

С помощью оператора && можно определить одновременное вы¬ 
полнение двух условий, как в следующих примерах: 

ЪѴаІ = (х >= 20) && (х <= 30) // возвращает бгие, если х 

// находится в диапазоне {20:30] 
ЪѴаІ = (х > 20) && у // возвращает бгие, если х больше 20 

//и значение переменной у соответствует Ггие 

Обратите внимание на то, что вместо выражения срав 
нения у == ггие можно использовать только имя са¬ 
мой переменной у. 

В случае применения оператора | і выражение возвратит сгие, 
если хотя бы одно из двух условий выражения будет истинным. 
Например: 

ЪѴаІ = (СхСРіеМ.ѵаіие != "") II (МуАггау ЛепдСЬ > 0) 

// возвращает бгие, если текстовое поле СхбРіеІсІ содержит 
// непустую строку текста или массив МуАггау содержит 
// хотя бы один элемент 

Логические выражения могут быть еще более сложными и содер¬ 
жать несколько логических операторов, например, как следующее: 
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ЪѴаІ = ((х >= 20) && (х <= 30)) II (у == х) 

// возвращает Сгие, если х находится в диапазоне [20:30], 

// или значение у равно значению х 

В наших примерах мы присваивали результат выраже¬ 
ния переменной ЪѴаІ. Эту переменную затем мы можем 
использовать в логической конструкции с оператором 
іГ или для проверки условия цикла. Но часто програм 
мисты обходятся без посредника и просто устанавлива¬ 
ют все логическое выражение в месте кода программы, 
где проверяется выполнение условия. 



Выполнение задач по циклу 

Если нам необходимо выполнить одну и ту же операцию с разны¬ 
ми объектами или с разными значениями переменной, проще всего 
это сделать, организовав выполнение части кода программы по циклу. 
Для организации циклов в ^ѵа$сгірі используются два оператора: 
Гог и ѵЛііІе. Помимо синтаксиса, разница между этими операторами 
состоит в логике организации цикла. Оператор Гог лучше использо¬ 
вать в тех случаях, когда цикл нужно выполнить определенное число 
раз, а оператор мЫ 1е лучше подходит для циклов, повторяющихся до 
достижения определенного условия или для создания бесконечных 
циклов. 

Цикл{ог 

Для организации цикла с помощью оператора Гог используется 
следующий синтаксис: 

Гог ( счетчик = иачальное_эначение; условие_завершения; 
лриращение_счетчика ) 

{ тело цикла } 

За оператором Гог следует код определения цикла, заключенный 
в круглые скобки, и заключенный в фигурные скобки код тела цик¬ 
ла — программа, повторяемая по циклу. 

Если тело цикла Гог состоит всего из одной строки ко¬ 
да, то фигурные скобки можно не устанавливать. Это 
справедливо также для исполняемого кода операторов 
ѵгііііе, ІГ И еіве. 
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Определение цикла состоит из трех выражений, разделенных сим¬ 
волами точки с запятой. 


♦ Первое выражение создает целочисленную переменную-счет¬ 
чик и присваивает ей начальное значение. 

♦ Второе выражение устанавливает условие, при невыполнении 
которого цикл прерывается. 

♦ Третье выражение устанавливает способ приращения счетчика. 
Чаще всего это счетчик++, что означает приращение счетчика на 
единицу после каждого цикла. Но можно использовать и более 
сложные выражения, например: счетчик = счетчик - 5 ; 


Можно показать множество примеров применения цикла Еог на 
практике. Этот оператор весьма полезен и чрезвычайно популярен у 
программистов. Одна из часто встречаемых задач, где используется 
цикл ^ог, — это заполнение данными массивов и сло¬ 
варей или же, наоборот, вывод данных из массивов и 
словарей на экран. 

0 Давайте рассмотрим пример выполнения обеих этих 
® задач в листин ге 5.1. 



Пример 


Листинг 5.1. Заполнение массива и вывод элементов массива 
на экран с помощью цикла Сот 

<5СВІРТ> 

ѵаг 5Іге = рагееіпс (рготрГ("Введите размер массива" ,"5")); 

ѵаг аг = пей Аггау(8Іге); 

іог (п = 0; п < аг.ІепдСЪ; п++) { 

зѴаІ = ргошрГ("Введите текст элемента массива","■) ; 
аг[п] = зѴаІ; 

йоситепг.мгіі:е(аг[п1 + "<ВК>" ); 

} 

</8СКІРТ> 

Сначала программа показывает диалоговое окно с предложени¬ 
ем ввести размер массива (по умолчанию предлагается значение 5). 
Значение размера преобразуется в целое число с помощью стандарт¬ 
ной функции рагзеіпЬ и присваивается переменной зіге. В следую¬ 
щей строке программа создает новый массив аг указанного размера. 
Затем следует предмет нашего изучения — цикл ёог. В определении 
цикла создается переменная-счетчик п, которой присваивается началь¬ 
ное значение 0. Цикл будет выполняться до тех пор, пока значение п 
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меньше размера созданного массива аг, и п увеличивается на единицу 
после выполнения каждого цикла. 

Тело цикла содержит три строки (поэтому заключено в фигурные 
скобки). Сначала программа предлагает пользователю ввести тексто¬ 
вое значение для текущего элемента массива. В следующей строке мы 
воспользовались счетчиком п как индексом массива для последова¬ 
тельного доступа ко всем сто элементам. Текущему элементу присва¬ 
ивается значение, введенное пользователем. Последняя строка тела 
цикла выводит значение текущего элемента массива на экран с по¬ 
мощью метода йоситепЬ .мгісе. 

Промежуточный этап заполнения массива показан на рис. 5.1. 



Рис. 5 . 1. Заполнение массива с помощью цикла Ног 


Цикл ѵѵЫІе 

Цикл мЬіІе, в отличие от цикла Еог, не содержит счетчика. Цикл 
ѵЛііІе длится до тех пор, пока выполняется заданное логическое 
условие. Как только логическое выражение, установленное в опре¬ 
делении цикла, возвратит Гаіве, цикл прекратится. Это условие 
может никогда не наступить, тогда цикл продолжается бесконечно. 
Возникновение бесконечною цикла обычно вызывает ошибку в вы¬ 
полнении программы и зависание приложения. Но иногда бесконеч¬ 
ные циклы создаются целенаправленно. Ниже вы узнаете об исполь¬ 
зовании оператора Ъгеак для прерывания цикла, что позволяет 
сделать цикл зависимым от нескольких условий. 

Оператор ѵЛііІе дает возможность создавать более гибкие циклы 
по сравнению с жестко детерминированными циклами оператора €ог. 
Приведем некоторые полезные свойства цикла мЫІе: 
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♦ выполнение цикла можно связать с любым условием, напри¬ 
мер значением системного времени или цветом фона \ѴеЪ- 
страницы и пр., тогда как в цикле іог контролируется только 
целочисленное значение счетчика; 

♦ проверка условия происходит перед входом в цикл и после вы¬ 
полнения последней строки в теле цикла. Таким образом, стро¬ 
ки тела цикла могут вообще не выполняться, если заданное 
условие изначально было ігаізе. 

Синтаксис цикла ѵЛііІе проще, чем у цикла Еог: 
ѵйіі 1 е ( логическое_выражеиие ) 

{ тело цикла } 



В листинге 5.2 показан простой пример, в котором 
раскрывается одна интересная особенность цикла ѵЛіі 1 е. 


Листинг 5.2. Особенности проверки условия в цикле мЬііе 


<8СКІРТ> 

СОипЬ = 1; 
мЪіІе (соипС< 5) { 

йосшпепт .ѵѵгі Се ( "Счетчик " + соипС + "<ВК>"); 
соипС++; 

} 

йоситепС . юг і Се (" <ВКхВК>"); 
соипС = 0; 
юЫІе (соипЬ< 5) { 
соипС++; 

ЙосшпепТ .югіСе( "Счетчик " + соипЬ + "<ВВ>"); 

} 

</8СКІРТ> 


В сценарии используются два на первый взгляд одинаковых цик¬ 
ла ѵйіііе. В условии проверяется значение счетчика, который инкре¬ 
ментируется при каждом выполнении тела цикла. Читатель может 
предположить, что для цикла со счетчиком лучше подойдет оператор 
Еог, и будет совершенно прав. Но этот пример был создан, чтобы 
обратить ваше внимание на особенности проверки условия в цикле 
ѵйіііе I Іовлияет ли на работу цикла положение в теле цикла строки 
с приращением счетчика? Результат выполнения сценария показан 
на рис. 5.2. 
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Метод Ѵ7гіте в теле обоих циклов вы¬ 
водит на страницу текущее значение 
счетчика. Разница только в том, что в 
первом цикле приращение счетчика про¬ 
исходит в последней строке тела цикла, 
а во втором цикле это первая строка. 
Начальные значения счетчика были по¬ 
добраны таким образом, чтобы первым 
значением, выводимым на экран, была 
единица. Несмотря на то что условия 
циклов были одинаковыми, второй цикл 
вывел значения от 1 до 5, а первый — от 
1 до 4. Все дело в том, что во втором ци¬ 
кле приращение счетчика происходило 
сразу после проверки условия, тогда как в первом - непосредственно 
перед проверкой. В случае создания аналогичного цикла Еог: 
іог (соипС = 1; сошЛ < 5; СОШЛ++) 

ЙосшпепС .ѵѵгіііе ("Счетчик " +■ соипЬ + "<ВК>"); 

результат будет однозначным (1, 2, 3, 4). Именно поэтому циклы 
со счетчиками лучше организовывать с помощью оператора Ног. 
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Рис. 5.2. Особенности провер¬ 
ки условия в цикле мЫІе 


Вложенные циклы 

В сценариях иногда используются конструкции, когда один цикл 
создается в теле другого цикла. Такие циклы называются вложенны¬ 
ми. Нет никаких ограничений на использование вложенных циклов 
и число вложений, кроме логики и здравого смысла. Это означает, 
что цикл Ног может быть вложен в тело другого цикла Ног или цикла 
кііііе и иметь в своем теле любой другой цикл. 



Выполнение циклов в сценарии может занять много 
времени и замедлить выгрузку \Л/еЬ-страницы. Следует 
помнить, что в случае использования вложенных ци¬ 
клов время выполнения сценария возрастет геометри¬ 
чески, т е. время выполнения двух вложенных циклов 
будет равняться произведению времени выполнения 
одного цикла на время выполнения другого цикла. 


Обычно вложенные циклы используют для математической об¬ 
работки многомерных массивов данных или для вывода данных на 
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экран в табличной форме. Причем, манипулируя условиями циклов, 
можно создать довольно сложные многомерные композиции, как 
в примере на рис. 5Л. 



Рис. 53. Елочка создана с помощью 
трех вложенных циклов іог 


Код сценария, с помощью которого была создана композиция 
на рис. 5.3, показан в листинге 5.3. 

Листинг 5.3. Создание двухмерной композиции с помощью 
вложенных циклов 

<$СКІРТ> 

±6т Ц - 1; і < 10; і += 4) { 
іог (з = 0; 3 < і + 3; 3 ++) { 
йосишепг. ѵлгісе (" <СЕ№ГЕК>"); 

:Еог (п = 0; п < і + 3*3; п++) 

<ЗосшпепТ.мгіІ:е(** 

(ЗоситепС .игіСе{ "</СЕ№ГЕК><ВК>"); 

} 

} 

</5СКІРТ> 
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Первый цикл Сог со счетчиком і устанавливает число уров¬ 
ней елочки п число символов звездочки в вершине каждого уровня. 
Следующий цикл со счетчиком і определяет число строк в каждом 
уровне, а следующий вложенный цикл со счетчиком п устанавлива¬ 
ет количество звездочек в каждой строке в зависимости от уровня. 
Взаимодействие между вложенными циклами достигается за счет 
того, что в условии каждого вложенного цикла используются значе¬ 
ния счетчиков цикла верхнего уровня. Обратите также внимание на 
то, как нам удалось выровнять звездочки в окне обозревателя с по¬ 
мощью дескриптора <СЕ№ГЕК>. 

"ч Приведем другой, более практичный, пример ис- 
Г Пример ] пользования вложенного цикла для динамического 
вывода данных многомерного массива в таблице. Код 
0 0 сценария показан в листинге 5.4. 

Листинг 5.4. Динамическое создание таблицы по данным 
многомерного массива 


<ВОБУ> 

<ТАВЬЕ ИАМЕ=Ч;Ь' П^'СЪ' В0К0ЕЕ=1></ТАВЬЕ> 
<5СКІРТ> 

агОаса = пем Аггау(3) ; 
агЛаЪа[0] = пем Аггау 

агБаТаШ = пем Аггау ( "а" ,"б","в","г","д"); 
аг0аса[2] = пем Аггау{; 

Сог (і = 0;і < агІЗаІ:а.1епд(:Ь;і++) { 
іЬ. іпзегѣКомЦ) ? 

іог (з - 0; з < агРаЬа[і].ІепдЫі; з++) { 

ТЪ. гомб [ і1.іпвегЪСеІ1(з); 

ТЪ.гомб[ іі.се11е[з].мійЫі = 50; 

Ыэ.гонгЦ] .се 1 І 8 [з] .аіідп = 'сепЬег'; 

СЪ.гомб[ і1.сеІХв Е 3 ]-іппегТехС = агЛаЬа [і][ 3 ]; 

} 

} 

</8СКІРТ> 

</В0БУ> 


В основной раздел \ѴеЪ-страницы добавляется пустая таблица под 
именем тЬ. Затем выполняется код сценария, в котором прежде все¬ 
го создается и заполняется данными многомерный массив агРаі:а. 
В следующих строках сценария выполняется конструкция из двух 
вложенных циклов Ног. Первый цикл добавляет в таблицу новую 
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строку, тогда как следующий цикл заполняет строку таблицы ячейка¬ 
ми и присваивает им значения из массива. (О динамическом созда¬ 
нии таблицы речь шла в главе 3.) Обратите внимание на то, как счет¬ 
чики циклов используются для адресации ячеек таблицы и элементов 
многомерного массива. Полученная таблица показана на рис. 5.4- 
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Рис. 5.4. Вывод данных многомер¬ 
ного массива с помощью конструк¬ 
ции вложенных циклов 


Прерывание и продолжение цикла 

В ^ѵаЗсгірі есть специальные команды, с помощью которых мож¬ 
но задействовать дополнительные уровни контроля за выполнением 
циклов: 

♦ Ьгеак — прерывает цикл в любой точке тела цикла; 

♦ сопьіпие заставляет программу пропустить все следующие 
строки тела цикла и начать новый цикл. 

Эти команды используются внутри циклов в конструкции с опе¬ 
раторами іі-еіве, чтобы проверить дополнительные условия выпол¬ 
нения цикла. 


Команда Ьгеак 


Команда Ьгеак является необходимым элементом бесконечных 
циклов. 



Рассмотрим следующий пример. Предположим, вы 
хотите защитить свою страницу с помощью своеобраз¬ 
ного пароля и сделать ее доступной только для тех, кто 
умеет умножать числа. Введите код листинга 5.5. 
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Листинг 5.5. Прерывание цикла с помощью команды ЬгеаХ 

<5СКІРТ> 
ѵаг с = 1; 
ѵѵЬіІе(с) { 

питі = МасЪ.гоипсЗ(МасЪ.гапс1от( ) *19 + 1); 
пит2 = МасЬ.гоип<3(МакЪ.гап<1от()*19 + 1); 

гезиІГ рготрГ(("Введите произведение " + питі + " х " + 
пшп2 

іі (гезиП: && рагзеіпс(гезиіс)) ( 
і? (гезиІЬ -- пит1*пит2) 

Ьгеак 

} 

} 

</5СНІРТ> 

В начале сценария запускается бесконечный цикл мЪіІе. Для 
этого переменной с присваивается значение 1, а в условии оператора 
проверяется, является ли значение с истинным. Поскольку все нену¬ 
левые значения истинны (см. главу 4), а переменная с нигде не изме¬ 
няется, цикл мЬі 1е будет продолжаться вечно, если его не остановить 
с помощью команды Ьгеак. Далее программа генерирует два случай¬ 
ных целых числа в диапазоне [ 1:20] и предлагает пользователю ввести 
результат произведения этих чисел. В следующих строках с помощью 
двух операторов іГ программа проверяет, является ли введенное зна¬ 
чение числом и соответствует ли оно произведению. Если да, цикл 
прерывается и продолжается загрузка \ѴеЬ-страницы. Если результат 
неправильный или пользователь щелкнул на кнопке Отмена, цикл 
будет повторяться вновь и вновь. Промежуточный этап выполнения 
программы показан на рис. 5.5. 







Рис. 5.5. Надеюсь, на этот раз я ваел правильное число 
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Команда сопііпие 

Команду сопсіпие часто применяют в случаях когда необходимо 
отследить недопустимое значение счетчика или другой изменяемой 
переменной цикла, пропустить выполнение цикла для этой перемен¬ 
ной, но продолжить цикл для последующих значений. Например, 
предположим, что мы хотим вывести обратные значения для ряда 
целых чисел. Для любого числа х можно получить значение 1/х за 
единственным исключением — число нуль. Деление на нуль вызовет 

Ѳ ошибку. Поэтому в программе следует установить 
проверку равенства переменной нулю, прежде чем 
выполнять деление. 

Рассмотрим пример в листинге 5.6. 

Листинг 5.6. Прокручивание цикла вхолостую с помощью 
команды сопсіпие 


<нтмь> 

<НЕАБ> 

<БСКІРТ> 

іипсСіоп сиІсО { 

ѵаг БСагС = МаСЪ.гоипсі (йосишепС .Ьогшз[0].еіетепбз[0 ]. 
ѵаіие)? 

ѵаг епй - МаСЪ.гоипй(йоситепС.іогт5[0].е1етепСз[1]. 
ѵаіие); 

іі (збагб && епб && (збагС < епй)) { 
оибриб .іппегНТМЬ = * " ; 
бог(п = збагб;г1 <= епб;п++) { 
іб (п == 0) 
сопСіпие 

зѴаІ = 1/п + ";<ВК>"; 
оиСриС.іппегНТМЬ += зѴаІ; 

} 

} 

} 

</8СКІРТ> 

</НЕАЬ> 

<ВСЮУ> 

<ЕОНМ> 

Первый член ряда: сІЫРОТ ТУРЕ='бехб' ѴАЬШ= '-5' хВК> 
Последний член ряда: <ШРЦТ ТУРЕ=' бехб' ѴАЫІЕ=' 5' хВЕхІЫРІІТ 
ТУРЕ= 'Ъиббоп' ѴАЫІЕ='Вывести ряд обратных чисел' 

ОИСЫСК = 1 сиіс {) 1 ><ВЕ> 
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</РОКМ> 

<Р МАМЕ=' оиЬриС ' ІБ= ’оиЬриЬ '></Р> 

</В0БУ> 

</НТМЬ> 

\ѴеЬ-страница предлагает ввести в поля формы значения начала 
и окончания ряда целых чисел, для которого программа рассчитает и 
выведет обратные значения 1/х, как показано на рис. 5.6. 
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Рис . 5.6. Программа исключает деле¬ 
ние на нуль 

Выполнение сценария запускается щелчком на кнопке Вывести 
ряд обратных чисел. Обратите внимание на то, как в сценарии мы мо¬ 
жем обратиться к значениям полей, даже если им не были присвоены 
уникальные имена. Для этого воспользуемся массивами элементов, 
о которых вы узнали в главе 4. 

Далее программа проверяет, были ли введены какие-либо данные 
в поля, а также следит за тем, чтобы первый член числового ряда был 
меньше последнего члена. Затем очищается текст именованного аб¬ 
заца и запускается цикл іог, в котором вычисляются значения 1/х. 
Если в числовом ряду оказывается нуль, то выполняется команда со- 
пСіпие, которая запускает следующий шаг цикла со значением счет¬ 
чика, увеличенным на единицу. 
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Ветвление программного кода 

Циклы делают программный код мощнее, позволяя многократно 
использовать один и тот же фрагмент кода для последовательной об¬ 
работки множества значении в массиве данных. Благодаря ветвлению 
программного кода сценарий становится более гибким, чувствитель¬ 
ным к контексту выполнения программы и к требованиям пользова¬ 
теля. Выбор той или иной подпрограммы зависит от выполнения или 
невыполнения определенного условия. Для ветвления программно¬ 
го кода ^ѵаЗсгірЕ используют конструкции операторов іГ-еІзе, 
Б^іСсЬ-сазе и условный операгор ?. 


Оператор іТ 

Оператор іЕ наиболее часто используется для ветвления про¬ 
граммного кода или выполнения части кода по условию. В простей¬ 
шем виде синтаксис оператора іі выглядит так: 

ІЕ (логическое выражение) 

{ код, выполняемый в случае возвращения 
логическим выражением значения Сгие } 

Если логическое выражение в операторе ІЕ возвратит ЕаІБе, 
весь блок кода, заключенный в фигурные скобки, будет пропущен, и 
управление перейдет к строке сценария, следующей за блоком опе¬ 
ратора ІЕ. 



Если код, находящийся под управлением оператора іЕ.. 
состоит всего из одной строки, фигурные скобки можно 
не вводить. 


Таким образом, в нервом варианте г помощью оператора і Е вы¬ 
деляется программный блок, выполнение которого необязательно и 
зависит от условия. Однако зачастую необходимо создать два аль¬ 
тернативных программных блока, один из которых обязательно вы¬ 
полняется в зависимости от выполнения или невыполнения условия. 
Для моделирования таких ситуаций используется конструкция опе¬ 
раторов іЕ-еІае: 

ІЕ (логическое выражение ) 

{ код, выполняемый в случае возвращения 
логическим выражением значения іігие } 
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еізе 

{ код, выполняемый в случае возвращения 
логическим выражением значения іаіве } 

Конструкции іі-еізе мы довольно часто использовали в пре¬ 
дыдущих листингах (например, листинг 4.3 в предыдущей главе). 

Множественное ветвление программного кода 

Мы рассмотрели простейший пример ветвления программного 
кода на две подпрограммы по условию, возвращающему одно из 
двух значений: пгие или Іаізе. Но в реальных ситуациях, которые мы 
пытаемся смоделировать с помощью сценариев, не все так просто. 
Если нужно сделать выбор между тремя или большим числом под¬ 
программ, одной конструкции і^-еізе будет недостаточно. В зави¬ 
симости от логики выполнения программы, проблему можно будет 
решить за счет вложенных конструкций іі-еізе или с помощью опе¬ 
раторов зміссЬ-саве. В следующих подразделах вы узнаете, в каком 
случае нужно использовать тот или иной подход. 

Вложенные операторы \і 

Часто ответ на один вопрос вызывает дополнительные вопросы. 
Логика таких сценариев следующая: если условие «А» выполняется, 
то нужно выполнить подпрограмму 1, если не выполняется, то нужно 
проверить условие «В» и по результатам проверки выполнить под¬ 
программу 2 или 3. Для решения этой проблемы можно использовать 
следующую комбинацию операторов іі и еізе: 
ѵаг А - логическое выражение ; 
ѵаг В = логическое выражение ; 
іі (А) 

{ код 1-й подпрограммы } 
еізе { 
іі (В) 

{ код 2-й подпрограммы } 
еізе 

{ код 3-й подпрограммы } 

} 

Выбор из трех подпрограмм — это еще довольно простая задача. 
Часто в сценариях приходится проверять много разных условий, и 
бесконечные чередования іі и еізе затрудняют чтение и понимание 
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кода сценария. Чтобы упростить код, в ^ѵа8сгірІ используется мо¬ 
дифицированный вариант конструкции ііі-еізе для проверки ряда 
условий: іі-еізе-іі. Предыдущая схема программного кода изме¬ 
нится следующим образом: 
іі (А) 

{ код 1-й подпрограммы } 
еізе іі (В){ 

{ код 2-й подпрограммы } 


еізе 

{ код 3-й подпрограммы } 

} 


Сначала проверяется условие «А». Если «А» — Іаізе, проверяет¬ 
ся условие «В». Если «В* окажется Еаізе, можно таким же образом 
добавить еще проверку условия «С» и т.д. Конструкцию завершает 
одиночный оператор еізе, блок которого выполняется только в том 
случае, если все условия оказались Іаізе. 

Рассмотрим применение этого подхода на примере. 
В листинге 5.7 представлен код сценария, который 
анализирует текстовый символ, введенный пользова¬ 
телем, и сообщает, является этот символ цифрой, бук- 
О вой или знаком. 

Листинг 5.7. Проверка типа символа с помощью вложенных 
операторов і* 



Пример 


<ЗСКІРТ> 

ѵаг БушЪоІ = ’"; 

ѵ/ЬіІе (зутЬоІ і= пиіі) { 

зутЬоІ = ргстрС("Введите любой одиночный символ" ,зутЬоІ) ; 
іі (зутЬоІ -= пиіі) 

Ьгеак 

еізе іі ((зутЬоІ >= "а" && зутЬоІ <= "г") II (зуіпЬоІ >= "А" 
&& зутЬоІ <= "2.“)) 

аіегс(зутЬоІ + " - буква латинского алфавита"); 
еізе (зушЬоІ >= "А" && зутЬоІ <= "я") 

а1егб(зутпЬо1 + “ - буква русского алфавита"); 
еізе 11 (зутЬоІ >= "О" && зутЬоІ <= "9") 
аІегб(зутЬоІ + " - цифра"); 
еізе і€ (зутЬоІ - - "") 

а1егб{"\"\" - пустая строка"); 
еізе 
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аіегс {зушЪоІ + " - знак препинания или 
специальный символ") 

) 

</5СНІРТ> 

В сценарии запускается цикл иЫ 1е, в первой строке которого от¬ 
крывается диалоговое окно с просьбой ввести символ. Дале*' следует 
программа анализа введенного символа. Первый оператор іі. прове¬ 
ряет, не была ли нажата клавиша Отмена. (В этом случае функция ди¬ 
алогового окна возвратит объект пи 11, и оператор Ьгеак прервет вы¬ 
полнение цикла.) Далее строки еізе ІГ последовательно проверяют 
принадлежность символа к остальным группам: буквам латинского 
алфавита, русского алфавита, цифрам или пустой строке. Если сим¬ 
вол не принадлежит ни к одной из этих групп, последний оператор 
еізе выводит сообщение, что был введен знак препинания или специ¬ 
альный символ. Пример выполнения сценария показан на рис. 5.7. 



Рис. 5.7. Программа анализа введенного символа 

Обратите внимание: последовательность проверки ус¬ 
ловии в листинге 5.7 не произвольна, а подчинена опре¬ 
деленной логике. Прежде всего проверяется условие 
прерывания цикла. Принадлежность символа к знакам 
препинания и специальным символам определяется в 
конце программы по той причине, что эти символы рас¬ 
средоточены по кодировочной таблице. Поэтому сна¬ 
чала мы проверяем принадлежность символа к груп¬ 
пам, образующим в кодировочной таблице сплошные 
массивы. Чтобы посмотреть кодировочную таблицу, вы¬ 
берите в ѴѴогб команду меню Вставка^Символ 
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Оператор $ѵѵіісН 

Оператор зѵ/і ЬсЪ удобно применять для анализа переменных, ко¬ 
торые могут принимать более двух значений. Типичный пример - зто 
обработка значений раскрывающегося списка с несколькими пункта¬ 
ми. Синтаксис олератора бміСсЬ следующий: 

зміСсЬ (выражение или переменная) { 
сазе значение 
строки кода 
Ьгеак; 

сазе значение: 
строки кода 
Ьгеак; 


йеіаиІС : 

строки кода 
Ьгеак; 

} 

В условии оператора зѵгіСсЬ может быть имя переменной или вы¬ 
ражение, возвращающее ряд значений. Тело оператора бміТсЬ заклю 
чается в фигурные скобки и состоит из повторяющихся операторов 
сазе, проверяющих совпадение значения оператора еміСсЬ с кон¬ 
стантным значением, установленным для каждого оператора сазе. 
Если совпадения не обнаружены, управление передается программно¬ 
му коду оператора беіаиіь в конце блока оператора бміСсЬ. 



Обратите внимание на то, что блоки операторов са¬ 
зе и йеіаиіт не выделяются фигурными скобками. Ис¬ 
пользуется другой синтаксис: блок начинается с симво¬ 
ла двоеточия и завершается оператором Ьгеак. 



Пример 


Расс мотрим пример использования на практике опе¬ 
ратора бміЬсЬ. На рис. 5.8 показан небольшой шу¬ 
точный психологический тест. 

Щелчок на картинке отображает текст в нижней 
ѵ части окна под заголовком Насколько вы независимы 
в суждениях и поступках. Щелчок на кнопке Очистить удаляет текст из 
этого абзаца, а щелчки на других элементах \УеЬ-с границы показыва¬ 
ют текст: «Вы промахнулись, щелкните еще!». 

Код \ѴеЬ-страшіцы показан в листинге 5.8. 
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Рис. 5.8. Выберите картинку , чтобы боль¬ 
ше узнать о своем характере 


Листинг 5.8. Использование оператора ѳѵгібсЬ для 
оценки выбора пользователя 

<нтмь> 

<КЕАБ> 

<Т1ТЬЕ>Психологический тест< /ТІТЬЕ> 

<ЗСКІРТ> 

Еипсбіоп бееб(п) { 

БІѴІбсЪ (П) { 
саае 0: 

ои&риб. ІппегТехІ: = "Вы промахнулись, щелкните еще!" 

Ъгеак ,* 
сазе 1: 

оибриС. іппегТехІ; = "Вы законопослушны. 

Законопослушные люди - основа нации и государства." 
Ьгеак; 
сазе 2: 

оибриб. ІппегТехІ: = "Чтобы заставить вас что-то 

сделать, достаточно сказать, чтобы вы этого не делали." 
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Ьгеак; 
сазе 3: 

оибриб. іппегТехб = "Вы пюбите высказать свое мнение, 
особенно если знаете, что вас поддержат." 

Ьгеак; 
сазе 4: 

оибриб. іппегТехб = "Вы - кот, который 
гуляет сам по себе." 

Ьгеак; 
йебаиіб : 

оибриб. іппегТехб = "" 

Ьгеак; 

} 

} 

</5СКІРТ> 

</НЕАБ> 

<ВОБУ> 

сТАВБЕ АЫСЫ= ’ сепбег * ВОКБЕК=0> 

сСАРТІОЫ ШСЫСК=' безб (0) ;' ><В>Выбермте картинку</В></ 
САРТІОЫ> 

<ТНхТН АЫСМ=' сепбег' ><ІМС БКС=' ішадез\сагбооп1 . ірд ' 
В0КБЕК=1 ЮІБТН= 1 150 ' НЕІСНТ= 1 150 1 ОМСЫСК= 1 безб (1) ; ' ></ТН> 
<ТН АЬХСЫ^'сепбег' ><ІМС 5КС= 1 ішадез\сагбооп2 .эрд' В0КБЕК=1 
ИІБТН= ' 150 ' НЕІСНТ= ’ 150 ’ ОМСЫСК= ’ безб (2) ; ’ х/ТНх/ТЕ> 
<ТЕхТН АЫСЫ='сепбег ’ хІМС ЗКС=' ішадез\сагбоопЗ . :рд' 
ВОКБЕК=1 ИЮТН=' 150' НЕІСНТ= , 150' 0ЫСЫСК= ’ безб (3); ‘ х/ТН> 
<ТН АЫСМ=' сепбег' хІМС ЗЕС^* ітадез\сагбооп4 . ірд' ВОКБЕК-1 
МІБТН= ' 150 * НЕІСНТ= ' 150 ' ОИСЫСК^' безб {4); 1 х/ТНх/ТЕ> 
</ТАВБЕ> 

<НЗ (ЖСЫСК=' безб (0};' >Насколько вы независимы в суждениях и 
поступках ?</НЗ > 

<ЕОКМ>< ІИРБТ ТѴРЕ= * Ьиб боп' ѴАШЕ= 1 Очистить 1 
0МСБІСК=*бе8б ( 'сіеаг' )"> <Р ИАМЕ='оибриб' ІБ=*оибриб* 
ОБСЫСК^ * безб (0) ; 'х/Р> 

</ВОБУ> 

</НТМЬ> 

Вся интерактивность \ѴеЬ-страницы реализована с помощью 
единственной функции обработки событий, безб, определенной 
в разделе заголовка кода НТМЬ. Функция принимает один аргу¬ 
мент, значение которого меняется в зависимости от того, на каком 
элементе \ѴеЬ-стран и цы был сделан щелчок. Так, щелчки на рисунках 
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передают в функции значения от 1 до 4. Щелчок на кнопке Очистить 
передает в функцию текстовое значение, а щелчки на других элемен¬ 
тах \ѴеЬ-гтраницы передают значение 0. В функции Гест значе¬ 
ние аргумента анализируется с помощью конструкции операторов 
зиіІісЪ-саее-гІеіаиП;, в результате чего каждое значение аргумента 
от 0 до 4 и "сіеаг” соответствует выводу определенного текста или 
очистке гголя. В результате с помощью одного оператора биіЬсіі про¬ 
граммный код разветвляется сразу на шесть подпрограмм. 

Условный оператор 

В том случае если прог раммные блоки операторов і і и еізе состо¬ 
ят из одиночных с трок, программный код можно сделать более ком¬ 
пактным, воспользовавшись вместо конструкции іі-еізе условным 
оператором . Приведем простейший пример использования дан¬ 
ного оператора, где в одной строке кода мы определяем цену билета 
в зависимости от возраста покупателя: 
ргіее = (аде <18? "5р." : "Юр."); 

Если заменить эту строку на обычную конструкцию і^-еізе, по¬ 
лучится более длинный код: 
іі (аде < 18) 
ргіее = "5 р."; 
еізе 

ргіее = "10 р."; 

Конструкции с условным оператором можно использовать внутри 
выражений. Предположим, что в вашей компании оптовым поку¬ 
пателям, закупившим товар более чем на 10 000 р., предоставлена 
скидка в виде бесплатной доставки товара, тогда как покупатели, ко¬ 
торые приобрели товар в розницу, платят за доставку еще 300 р. 
Создадим соответствующий код программы с использованием услов¬ 
ного оператора: 

Соіа1_ргісе = ргіее + (ргіее < 10000 ? 300 : 0); 

Теперь эта же программа с использованием конструкции іі-еізе: 
іі (ргіее < 10000) 

СоЬа1_ргісе = ргіее + 300; 
еізе 

Соі:аі_ргісе = ргіее 

Экономия места очевидна. 
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Пример 


Посмотрите еще один пример использования услов¬ 
ного оператора для выравнивания вывода числовых 
значении на экран без применения таблицы. Допустим. 

^0 нам нужно вывести массив данных со значениями в 
диапазоне от единиц до сотен. Мы хотим разместить 
значения в строках и колонках так, чтобы цифры в разных строках 
располагались строго по линии друг над другом. Это не так просто 
сделать, учитывая, что однозначные, двузначные и трехзначные числа 
имеют разную длину. Введите код программы из листинга 5.9. 


Листинг 5.9. Выравнивание значений в колонках 

<$СКІРТ> 

Ёог (і=1;і<56;і++) { 

пит - МаСР.гоип(і(МасЪ.іапбот{ ) *998 + 1)? 

оиСриС = (пит < 10 ? ■." : " — " ); 

оиСриС +- (пит < 100 ? ".."+пит : пит); 
<ЗоситепС .шгіСе (оиСриЬ) ; 
іі' (і % 10 == 0) 

йсситепС .мгіЪе ( В <ВК>") ; 


} 

</2СКІРТ> 

В сценарии запускается цикл іог. Число циклов в данном случае 
не столь важно, лишь бы их было дос гаточно для создания наглядно¬ 
го массива данных. Массив целых чисел в диапазоне от 1 до 999 гене¬ 
рирует строка кодаМасЪ. гоипсі (МаиЪ. гапйот() *998 + 1). Затем мы 
формируем строку вывода оисрис. прибавляя к числовому значению 
точки таким образом, чтобы строки с однозначными, двузначными и 
трехзначными цифрами были одинаковой длины. Обратите внимание 
на использование условного оператора для заполнения строк вывода. 
После каждого десятого значения выводится новая строка. Для этого 
проверяем, делится ли счетчик цикла Сог на 10 без остатка, исполь¬ 
зуя оператор деления но модулю. (Подробно об операторе деления но 
модулю рассказывалось в главе .4.) Результат выполнения проіраммы 
показан на рис. 5.9. 
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Рис . 5.9. Выравнивание чисел в колон¬ 
ках путем заполнения строк вывода до 
фиксированной длины 



Вы можете видоизменить сценарий в листинге 5.9 та¬ 
ким образом, чтобы выравнивались не только числовые 
значения, но и небольшие слова. Попытайтесь сделать 
это самостоятельно. Вспомните, что длину слова в сце¬ 
нарии ІаѵаБсгірі: можно определить следующим обра¬ 


зом: слово. ІепдСЪ. 


Установка таймера выполнения функций 


^ѵаЗсгірІ позволяет устанавливать промежуток времени между 
вызовом функции и ее исполнением. Для этого используется метод 
зестітеоис объекта міпсіом. Установка параметров метода произво¬ 
дится следующим образом: 

ѵгіпсіон. веСТітеоиІ: (* вызов_функции п , время_задержки); 


Можно указать не одну функцию, а строку из нескольких выраже¬ 
ний и вызовов функций, отделяя каждый элемент символами точки с 
запятой. Вызов функции следует взять в кавычки. 

Время задержки исполнения функции устанавливает¬ 
ся в миллисекундах, т.е. значение 5000 будет соответ¬ 
ствовать 5 с. а 10 000 — 10 с. 

Пример использования таймера показан в листин¬ 
ге 5.10. 



Пример 


Листинг 5.10. Задержка исполнения функции 

<нтмь> 

<НЕАР> 
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<8СКІРТ> 

НтсСхоп гаЬЫСО { 

(ЗоситепЬ .мгіЬе ("<Н1>0 господи, что это?</Н1хВК/хІМС 
БНС= 1 ігаадеБ/дооее.діі '/>") ? 

} 

</8СКІРТ> 

</НЕАБ> 

<ВСЮУ> 

<Н1>Сейчас я достану кролика из своей шляпы.</Н1> 

<РОКМ> 

<ШРВТ ТУРЕ=’ЪиЬСоп' ѴАЫШ= 'Щелкни здесь' ОЫСЬІСК="иіпаои. 
зеСТігаеоиі: ( ‘гаЬЬіЬ ()', 5000) "> 

</РОКМ> 

</ВОБУ> 

</НТМЬ> 

После загрузки \ѴеЬ-страницы отобразится картинка, показанная 
на рис. 5.10. 

Текст заголовка обещает, что сейчас появится кролик из шляпы, 
щелкните только на кнопке. После щелчка на кнопке не происходит 
ничего, видимо что-то не получилось?! Но прошло 5 с, и на экране по¬ 
явился совсем не тот, кого мы ждали (рис. 5.11). 



Рис. 5. 10. Щелкните на кнопке, чтобы достать кролика из шляпы 
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Рис. 5.11 . На экране появился разъяренный гусь 


Простая шутка, но нам в этом примере следует обратить внимание 
на то, что выполнение функции гаЬЫ С было отложено на 5 с. 

В главе 3 в листинге 3.10 мы создали весьма полезный сценарий 
для динамического изменения заголовка окна обозревателя в ответ на 
изменение содержимого основной рамки \ѴеЪ-страницы. Если пом¬ 
ните, тогда мы столкнулись с тем, что выполнение функции обновле¬ 
ния заголовка необходимо было задержать до того момента, пока не 
тверши гея загрузка нового документа в рамку. Нам пришлось соз¬ 
дать довольно хитроумную комбинацию с циклом ѵЛііІе и проверкой 
наличия заголовка нового документа с помощью оператора іі. Суть 
этой конструкции не разъяснялась, но теперь вы можете разобрать¬ 
ся в ней самостоятельно и, более того, значительно упростить ее, от¬ 
ложив выполнение функции ирба 1 :е_ЬН: 1 е на 5 с, используя таймер 
міпдом.вегтіігіеоиг. Попробуйте сделать это. 
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Элементы мультимедиа 
в динамических 
ѴѴеЬ-страницах 

\ѴеЬ-страница, содержащая только текст, выглядит скучно н не¬ 
интересно. В этой главе вы узнаете об объектах мультимедиа и воз¬ 
можностях управления ими с помощью сценариев. Разумное исполь¬ 
зование мультимедийных объектов, к которым относятся рисунки, 
графическая анимация, видео, звуки, аплеты и элементы управления 
АсііѵеХ, значительно повысит привлекательность ѴѴеЬ-страницы. Не¬ 
достаток применения спецэффектов состоит в том, что они отвлекают 
внимание посетителей и затрудняют чтение текста. Поэтому чрезвы¬ 
чайно важно, чтобы мультимедийный объект или эффект анимации 
появился тогда, когда это необходимо автору. 

Помимо объектов мультимедиа, в этой главе мы рассмотрим сред¬ 
ства создания эффектов анимации и анализа системной информации. 
Начнем главу со знакомства с объектом Саге, возвращающим систем¬ 
ное время компьютера. 


Возвращение даты и времени 

Если в работе вы хотите использовать текущую дату и время не 
только для показа на \ѴеЬ-странице. но и для расчетов в сценариях, 
познакомьтесь с объектом Баіе. Этот объект позволяет: 

♦ возвращат ь системную дату и время: 

♦ отображать дату и время в разных форматах; 

♦ производигь вычис лення с датой н временем. 

Отображение системного времени 

Объект БаГе создается следующей сірокой кода: 

ѵаг госЗау = пей БасеО; 
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В переменную бскЗау заносится дата и время, извлеченные из си¬ 
стемного таймера компьютера в момент выполнения строки кода сце¬ 
нария. Но в сценарии можно создать объект Оабе с информацией 
о любой произвольной дате, как в следующих примерах: 
ѵаг бобау = пей БаТе( “НоѵелтЬег 5бб, 2005 14:30:00") 
ѵаг бобау = пем Бабе(2005, 10, 5, 14, 30, 0) 

Обратите внимание на то, что дата может вводиться как 
строка текста и как набор числовых значений. Данные 
времени (часы, минуты и секунды) в обоих случаях мож 
но не указывать. 

Объект Басе но умолчанию возвращает строку текста. Чтобы убе¬ 
диться в этом, введите в код сценария такую строку: 
аіегб (пем Бабе()); 

Текущее системное время отобразится в окне сообщения (рис. 6.1). 





1 

Рис. 6.1. Текущее время 
в окне сообщения 

Формат данных о текущей дате и времени 

От обычной строки текста объект Бабе отличается тем, что у него 
есть набор методов, которые позволяют извлекать составляющие 
элементы текущей даты: 

♦ дебТеаг() — год: 

♦ дебМопбЪ () — месяц; 

♦ дебБауО — день недели; 

♦ дебБабе () — число месяца; 

♦ дебНоигв () — часы; 

♦ дебМіпибев () — минуты; 

♦ дебБесопсІв () — секунды. 

Выполнение всех этих методов в той последовательности, как 
они представлены в списке, показано на рис. 6.2. (На экран текст 
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выводился с помощью метода шгібе, например: гіоситепб.игібе ("Год: 
" бойау .дебУеаг О,"<ВК> 



Рис. 6.2. Составляющие эле¬ 
менты даты 


^ "-"ѵ Данные, показанные на рис. 6.2, были получены 24 но- 

[На Заметку] ября 2005 года (четверг) в 23:09:50. Вас не удивило 
У несоответствие с некоторыми датами на рис. 6.2? На 
0 0 экран был выведен 10-й месяц. Это не ошибка компью¬ 
тера. Просто компьютер считает месяцы с нуля, т.е для 
января номер месяца будет 0. Точно так же с нулевой 
отметки ведется отсчет дней недели. Четверг был выве¬ 
ден под номером 4 по той причине, что первым днем 
недели у англичан считается воскресенье. 

Если вы хотите отобразить на странице текущий день недели или 
месяц словами, вам придется немножко потрудиться и создать два 
массива, как в листинге 6.1. 

Листинг 6.1. Преобразование даты в слова 

<всюѵ> 

<Р ЫАМЕ= 1 сіоск* ІБ='с1оск' АЫСЫ='сепбег' ></Р> 

<2СРІРТ> 

бауз = нем Аггау("воскресенье“, "понедельник", "вторник", 

"среда", "четверг", "пятница", "суббота"); 

пюпбЪз = пем Аггау("января", "февраля", "марта", "апреля", 

"мая", "июня", "июля", "августа", "сентября", "октября", 

"ноября", "декабря"); 
бобау = пек Бабе(); 
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сіоск ЛппегНТМЬ = іосіау .деСНоигз () + ((Сосіау.деіНоигзОсІО) ? 
■0:’ : * ( (Тогіау.деЬМіпиЬезО-сІО) ? "0* : ■■) + Ьосіау. 

деіМіпиЬез() +■ "<ВК>"; 

сІоск.іппегНТМЬ + (йауз [Ьосіау .деіЬау () ] +■ "<ВК>"); 
сІоск.іппегНТМЬ += (Ьодау.деЬЬаіе() * " ■ + топЬЪ5[Ьо<Зау. 
деЬМопьНОІ *■ " " + Ьойау .деіУеаг {)) ; 

</5СКІРТ> 

</ВСЮУ> 

Результат выполнения сценария показан на рис. 6.3. 



Рис. 6.3. Текущая дата вы¬ 
ведена словами и цифрами 



Чтобы часы и минуты всегда выводились двухзначным 
числом, мы воспользовались знакомым вам условным 
оператором (см. главу 5): 

(Ьойау .деЬНоигз() + ({Годау.деЬНоигз()<10) ? 
"0:" : + ( (Госіау . деЬМіпиСез () <10) ? "0" : 


"■) * іойау.деЬМіпиіез () + "<ВК>") 


Часы на ѴѴеЬ-странице 


Вы научились извлекать системное время компьютера и показы¬ 
вать его на экране. Этим можно воспользоваться для отображения на 
\ѴеЬ-странице даты и времени ее открыт ия, если такая информация 
важна для понимания содержимого \ѴеЪ -страницы. Но показанное 
время будет статичным. Если вы хотите показать на странице вирту¬ 
альные часы, отображающие реальное время, го необходимо напи¬ 



сать сценарий для регулярного обновления строки 
на экране. 

Имея понятие о функциях, бесконечных циклах и 
таймере задержки выполнения функции, вы без тру¬ 
да выполните эту задачу. 


1. В коде НТМЬ \ѴеЬ-страницы создайте пустой именованный 
абзац, например: <Р МАМЕ-' сіоск ■ ІБ= ’ сіоск * ><Р>. Помести¬ 
те абзац в той части страницы, где должны отображаться час ы. 
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2. Преобразуйте код листинга 6.1 в пользовательскую функцию 
с именем, например: 51 юм_с 1 оск (). (Если вы забыли, как соз¬ 
давать пользовательские функции, вернитесь к главе 3.) До¬ 
бавьте в код функции еще одну строку: 

ееТТзлпеоиТ{"з1юм_е1оск()",60000) ; 

3. В конце основного раздела \ѴеЪ -страницы (где-нибудь между 
дескрипторами < ВОБУ>...</БОБУ> , но после дескрипторов абза¬ 
ца, в котором будут выводиться часы) добавьте вызов функции 

в!іО\\Г_СІОСк (). 

4. После загрузки ѴѴеЪ-страницы на ней отобразятся часы, такие 
же, как на рис. 6.3, но теперь время будет обновляться каждую 
минуту. 



Обратите внимание на то, что в код функции зЪоѵ*_ 
сіоск мы добавили вызов этой же функции с задерж 
кой в 60 с. В результате функция еЪои_с1оск будет вы¬ 
полняться каждые 60 с, вызывая саму себя. Вам может 
показаться, что эту задачу можно было бы решить с по¬ 
мощью бесконечного цикла, например так: 


<8СКІРТ> 
ѵаг і = 1? 
ѵ?Ы1е (і) 

БеТТітеоиТ("8Ьои_с1оскО ",60000); 

</8СРІРТ> 

Даже не пытайтесь это сделать, поскольку данный бес 
конечный цикл приведет к зависанию приложения обо¬ 
зревателя 


Вычисление даты и времени 

Несмотря на то что объект Ба Те по умолчанию возвращает строку 
текста (см. рис. 6.1), данные в нем хранятся в другом формате — це¬ 
лое число, представляющее количество миллисекунд, прошедших от 
базовой даты, полуночи 1 января 1970 года. Это число называется 
примитивным значением объекта Бате. Для его возвращения исполь¬ 
зуется метод ѵаіиеОТ (). 

Возможность получить текущую дату одним числом позволяет 
нам производить вычисления времени между событиями. 
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Для примера давайте слегка преобразуем код функции 
Б1юм_с1оск, с которой мы работали в предыдущем 
разделе (листинг 6.2). 


Листинг 6.2. Определение времени между двумя 
вызовами функции 

<нтмь> 

<НЕАБ> 


<5СРІРТ> 

ЕипсЬіоп 8Ьом_с1оск(1аБТ_Сіте} { 

// код листинга 6.1. 

аІегС (Сойау . ѵаІиеОі: {) - 1а8И_Ыте. ѵаІиеОЕ {)); 
зеСТішеоиС ( И 5Ікж_с1оск{Сойау) ",60000);} 
</5СКІРТ> 

</НЕАБ> 

<В0БУ> 

<Р КАМЕ-'сІоск' Ю =, с1оск' АЫСК='сепІ:ег , ></Р> 
<ЗСКІРТ> 

5ком_с1оск (пеѵ/ БаСе ()); 

</5СКІРТ> 

</БОБУ></НТМБ> 


Были внесены следующие изменения. В определение функции 
з1іоы_с1оск добавлен аргумент 1азс_т:хше, принимающий объект 
Басе. Код функции остался таким же, как в листинге 6.1, за исклю¬ 
чением двух последних строк. В предпоследней строке сравниваются 
примитивные значения объекта ВаСе, переданного с аргументом, 
и переменной еойау, созданной в теле функции. Результат выводит¬ 
ся в стандартном окне сообщения. Затем выполняется вызов этой же 
функции зЬою_с1оск с задержкой в 60 с и с передачей переменной 
Сойау в качестве аргумента. Мы можем ожидать, что окно сообщения 
покажет нам интервал между вызовами функции в 60 000 миллисе¬ 
кунд. В действительности интервал будет больше (рис. 6.4), посколь¬ 
ку какое-то время будет затрачено на выполнение самой функции. 


т ггіСрнш)' йфкм»; рЫ 


?\ ѴЖІ 


Рис. 6.4. Время меж¬ 
ду вызовами функции 
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Мы можем воспользоваться этим подходом, чтобы разместить на 
персональной \ѴеЬ-странице напоминание о том, сколько дней оста¬ 
лось до какого-нибудь знаменательного события: Нового года, дня 
рождения, очередного чемпионата мира по футболу и т.п. Но чтобы 
текст напоминания был понятен, значение в миллисекундах нужно 
преобразовать в дни, часы или минуты. Для этого полученное зна¬ 
чение нужно разделить на число миллисекунд в желаемой единице 
времени: 

♦ су гки 86 400 000 мс; ♦ минута 60 000 мс; 
(Пример ) ф час 360 000 мс; ♦ секунда- 1000 мс. 

0 0 Рассмотрим пример в листинге 6.3. 

Листинг 6.3. Определение числа дней до знаменательной даты 

<нтмь> 

<НЕАБ> 

<ТІТЬЕ>Скоро Новый год!</ТІТЬЕ> 

</НЕАБ> 

<ВСЮУ> 

<5СКІРТ> 

ѵаг ЫемУеаг = пем БаСе("йагшагу 1, 2006"}; 
ѵаг Гойау = пем БаСе(); 

ѵаг дау_1еіс - МаСН.сеіІ { ДОенУеаг.ѵаІиеОІ: () -Сойау .ѵаІиеОІ: ()) / 
86400000) 

ІТ (йау__1еСС == 1) 

Йоситепс .югіСе{"<Н1>До Нового года остался 1 день!! !</Н1>" ); 
еізе 

йосишепС .ѵ7гіСе("<НІ>До Нового года осталось ",йау_ 

ІеЛС,(йау_1е5Ь<5 ? " дня":" дней"),"!! !</Н1>") 

</8СКІРТ> 

</ВОБУх/НТМЬ> 

Сценарий \ѴеЬ-страницы очень простой. Создается объект Басе 
с датой Нового года. Затем возвращается текущая дата. Находим раз¬ 
ницу между примитивными значениями этих переменных, делим 
полученное значение на число миллисекунд в сутках и округляем до 
ближайшего большего целого числа методом МаСіі.сеіІ. Текст заго¬ 
ловка выбирается с помощью конструкции операторов і€-е1зе и 
с помощью условного оператора. Результат показан на рис. 6.5. 
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МЙглмйі ЗДя*м'Г,Ьф&мж> 


■ 15?.» -1 Іііфілл ?Ч«1 СЗДМы ^ 

.* л! ^ *»*•**«« ^?» ■;» ..^ 


До ІІокогміода опалось 37 Жен! 1 ! 


Рис. 6.5. Сколько дней осталось до Нового года? 


Графика и эффекты анимации 

Занимаясь разработкой \ѴеЬ-странип, вы можете проявить себя не 
только как писатель, но и как режиссер. Мир Интернет динамичен и 
полон движения. Эффекты анимации позволят привлечь внимание по¬ 
сетителей \ѴеЬ-страницы и выделить наиболее важные информацион¬ 
ные блоки. Но будьге сдержанны, применяя спецэффекты. Анимация 
должна привлекать, но не отвлекать внимание посетителем. 

Обычно для анимации используют графические объекты — изо¬ 
бражения в формате ОІР. которые сменяют друі друга с опреде¬ 
ленной частотой, часто но циклу. В результате получается эффект 
движения или изменения графического изображения. К аннмацші 
также относится динамическое изменение или перемещение тек¬ 
ста — эффект бегущей строки. На ХѴсЬ-страницах можно показы¬ 
вать целые фильмы, но эта возможность уже относится не к ани¬ 
мации, а к созданию встроенных объектов мультимедиа, о чем речь 
пойдет в последующих разделах этой главы. 

Бегущая строка 

Интересный способ привлечения внимания к короткому, но ем¬ 
кому сообщению состоит в использовании бегущей строки. Бегущая 
строка — это анимационный эффект, при котором строка текста пере¬ 
мещается по странице один раз, несколько рал, или постоянно. 

Объект МАКОІІЕЕ 

Для создания бегущей строки используется специальный деск¬ 
риптор <МАК01)ЕЕ>. Атрибуты эгого дескриптора контролируют пара¬ 
метры перемещения текста. 
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♦ венаѵіок — способ вы полисныя эффекта бегущей строки: 

• зегоіі — текст исчезает за краем \ѴеЬ-страницы; 

• зіібе — после выполнения заданного числа циклов текст 
остается у левого или правого поля ЛѴеЬ-страницы: 

• аісегпасе - направление перемещения текста в строке 
меняется на противоположное после выполнения каждо¬ 
го цикла, ио завершении последнего цикла текст остает¬ 
ся у края страницы. 

♦ ВССОЬОК - цвет фона бегу-щей строки (см. табл. 2.3). 

♦ РІКЕСТІСЖ направление перемещения текста: 

• Іеі:!: —- влево; 

• гідЬС — вправо. 

♦ неіснт высота бегущей строки. 

♦ Н8РАСЕ отступ в пикселях текста бегущей строки от левого и 
правого полей \ѴеЬ-страницы. 

♦ ЬООР число показов текста в строке: 

• ? — целочисленное значение, указывающее число повторов; 

• іпЕіпісе — бесконечное повторение эффекта по циклу. 

♦ ЗСКОЫАМОШТ смещение текста в пикселях за один шаг. 

♦ бскоььбеііАУ — временной промежуток между смещениями в 
миллисекундах, по умолчанию 60 мс. Используйте этот атри¬ 
бут, чтобы замедлить перемещение текста в строке, так как зна¬ 
чения менее 60 мс будут игнорироваться обозревателем. Чтобы 
ускорить перемещение текста, переустановите минимальное 
значение смещения текста в атрибуте ТІШЕ5РЕЕЕ. 

♦ Ѵ8РАСЕ отступ в пикселях но вертикали от текста до рамки 
бегущей строки. 

♦ ТКИЕ8РЕЕБ минимальное значение смещения текста, по 
умолчанию 60 мс. 

♦ ѴШЭТН ширина бегущей строки в пикселях. 

Текст, заключенный между дескрипторами <МАКСЮЕЕ>... 
</МАЕ0 ііее>, можно форматировать так же. как обыч 
ный текст ѴѴеЬ- страницы. 
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"Ч Объект бегущей строки, созданный с помощью де- 
( Пример ) скрииторов <МАЕС)ІІЕЕ>...< /МАК01ІЕЕ>, доступен для 
динамического редактирования с помощью сценариев. 
0 0 Посмотрите код листинга 6.4. 

Листинг 6.4. Управление свойствами бегущей строки с помощью 
кнопок формы 

<нтмь> 

<НЕАБ> 

<ТИЪЕ>Бегущая строка</ТІТБЕ> 

<5СКІРТ> 

іипсГіоп зет_тагдиее(ГехЕ # со1ог) { 
тагдиее . іппегТехЕ = ЕехГ; 
гоащиее . ЬдСоІог = соіог; 

} 

</5СКІРТ> 

</НЕАБ> 

<ВООУ> 

<МАК01ІЕЕ ЦАМЕ=' тагдиее' ІБ-' тагдиее' ></МАКОШЕ> 

<РОЕМ> 

<Р> 

<ІЫРБТ ТѴРЕ= 'ЬиГЕоп' ѴАШЕ="Красная кнопка" ОЖ:ЫСК="зеЕ_ 
тагдиее(' Текст красной кнопки *,’гей’);"> 

<ШРЦТ ТУРЕ^ЪиГГоп' ѴАШЕ-"Желтая кнопка" (ЖСЫСК="5еГ_ 
шагдиее ( 'Текст желтой кнопки' , 'уеііоѵ/'); "> 
сІЫРІЗТ ТУРЕ= * ЬиГСоп ' ѴАШЕ= “Зеленая кнопка" ОМСЫСК="БеГ_ 
шагдиее(' Текст зеленой кнопки','дгееп 1 );"> 

</Р> 

</РОРМ> 

</ВОРУ></НТМЬ> 

\ѴеЬ-страница содержит именованный объект бегущей строки и 
форму с тремя кнопками. Щелчок на кнопке выводит текст в бегущей 
строке и изменяет цвет фона. Все кнопки вызывают на выполнение 
функцию зег_шагдиее, определенную в сценарии в заголовке \УеЪ- 
страницы. Эта функция принимает в аргументах текст и значение 
цвета. В строках функции происходит присвоение полученных значе¬ 
ний соответствующим атрибутам объекта бегущей строки. Результат 
выполнения сценария показан на рис. 6.6. 
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Рис. 6.6. Вывод текста в бегущей строке с помощью кнопок 

Эффект бегущей строки поддерживается только в обо¬ 
зревателе Іпіегпеі Ехріогег. В других обозревателях 
текст будет отображаться как обычная строка. 


Бегущий текст в строке состояния 

Показ сообщений в строке состояния - это не самый лучший спо¬ 
соб информирования посетителей \ѴеЬ-страницы, поскольку часто 
пользователи Интернет не обращают ни малейшего внимания на ео- 

Ѳ общения в этой части окна обозревателя. Но движу¬ 
щийся текст безусловно привлечет внимание. 

Чтобы заставить текст двигаться, введите код \ѴеЬ- 
страницы, показанный в листинге 6.5. 

Листинг 6.5. Бегущий текст в строке состояния 


<нтмь> 

сНЕМЬ 

<ТІТЬЕ>Бегущая строка</ТИЪЕ> 
<5СКІРТ> 

НтсСіоп зе*:_рЪгазе(1:Ѵа1) { 
іі (СѴаІ) { 

рйгазе = "..." + СѴаІ + 
8еС_вСаі:и8 {); 

} 

еІБе 

зЬорзсгоІІ(); 

} 


ЕипсСіоп 8еС_8ЕаЕиз{) { 

Іеп = рЬгазе .ІепдСЬ; 

ЕігзС = рЬга8е.зиЪ5І;гіпд(0,1); 
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гезС = ріігазе.8иЪ5бгіпд(1,Іеп); 
рЬгаве = гезб + Гігзб; 
зеіі.збабиз = рЬгазе; 

(гітегіБ = зебТітеоиі {"зеб_зі;аі:и5{)" ,100) 


іипсСіоп зЬорзсгоІЮ { 
сІеагТіліеоиІ: (бітегЮ) ; 

зеіі: .збабиз = "Бегущий текст остановлен"; 

) 

</8СКІРТ> 

</НЕАБ> 

<В0БУ> 

<ЕОКМ> 

<ІМРОТ ТУРЕ= *ЬехС' ЫАМЕ='іприЬ' ІБ= ' іприЬ 1 
8ТУЬЕ= "місІЬЪ : '500' "><ВЕ> 

<ШРОТ ТУРЕ= 'ЪиТбоп* ѴАНІЕ- ' Запустить бегущую строку ' 
0МСЫСК="зеб_р1іга8е (іприб . ѵаіие) "-><ВК> 

<ІЫРЦТ ТУРЕ='ЪиССоп' ѴАЫІЕ= ' Остановить бегущую строку' 
0НСЫСК="зборзсго11 () "> 

</ЕОКМ> 

</ВОБУх/НТМБ> 

Полученная \ѴеЪ-страница (рис. 6.7) содержит текстовое поле и 
две кнопки. 



Рис. 6.7. Бегущий текст в строке состояния 


Первая кнопка. Запустить бегущую строку, извлекает строку из 
текстового поля и передает ее функции зес_рЬгазе (код функций 
находится в сценарии в области заголовка \ѴеЬ-страницы). Данная 
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функция добавляет к строке начинающие и замыкающие символы 
точек, чтобы можно было отделить окончание одной строки от начала 
следующей в строке состояния. Далее следует вызов функции веС_ 
БТаеив. Функция 5ес_зСаеііБ работает так. 

1. С помощью метода зиЬзЬгіпд первый символ извлекается из 
строки и помещается в ее конец. 

2. Полученная строка передается в строку состояния командой 

БеІ^.зЬаеие - рЬгаве;. 

3. Вновь происходит вызов функции 8еТ_8СаСиБ с установ¬ 
кой таймера на 100 мс. Таймер присваивается переменной 

ЬітегШ. 

Таким образом, эффект бегущего текста достигается за счет того, 
что функция 5еС_8і:аІ:и8 вызывается рекурсивно но бесконечному 
циклу и на каждом этапе переносит первый символ в конец строки. 
С помощью таймера устанавливается скорость перемещения с троки 
по полю. 

Вторая кнопка, Остановить бегущую строку, прекращает рекурсию 
функции зеС_8ТаТиБ путем очистки таіімера. Для этого для перемен¬ 
ной таймера СітегЮ вызывается метод сІеагТішеоиЬ. 

а 'Ч На примере листинга 6.5 вы познакомились с новы 
(На заметку] ми методами и свойствами таймера: таймер можно 
у У присвоить переменной, можно прервать выполнение 

О- функции по таймеру с помощью метода сІеагТішеоиЬ. 
На ѴѴеЬ-странице можно установить несколько тайме¬ 
ров с разными именами, контролирующих различные 
процессы. 

Управление графическими объектами 

Рисунки на ШеЪ-страницы можно добавлять несколькими спо¬ 
собами: 

♦ г помощью дескриптора <ІМС> (см. главу 2); 

♦ с помощью дескриптора <ОВДЕСТ> (см. раздел «Создание объек¬ 
тов мультимедиа с помощью дескриптора <ОВІЕСТ>», далее 
в этой главе); 

♦ с помощью конструктора графического объекта Ігпаде (). 
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Конструктор графических объектов 

Объект графического изображения, так же, как другие объекты, 
создается с помощью ключевого слова пей и конструктора графиче¬ 
ских объектов Ітаде (): 

Муітаде = пеѵ/ Ішаде {ширина, высота ); 

Ширина и высота изображения в пикселях задаются целочислен¬ 
ными значениями. Но эти аргументы необязательны и могут быть 
пропущены. В этом случае создается пустой объект графического 
изображения. Далее следует связать с этим объектом выбранный гра¬ 
фический файл: 

Му Ітаде. зге = "ту ітаде. зрд" * 

Как и в случае с дескриптором <ІМС>, графический файл рисун¬ 
ка устанавливается в свойстве зге. Объект изображения имеет 
еще одно весьма полезное свойство — сошрІеСе. Это свойство при¬ 
нимает значение ігие после завершения выгрузки изображения на 
\УеЬ-етраницу. 

Есть еще одно отличие графического объекта, созданного с помо¬ 
щью конструктора, от объекта, добавленного в коде НТМЬ. Каждый 
рисунок, добавленный с помощью дескриптора <ІМС>, автоматически 
становится элементом стандартного массива ітадез. Так, к первому 
рисунку на странице можно обратиться следующим образом: <Зо- 
сшпепС. ітадез [ 0 ]. Объекты, созданные в сценариях, не становятся 
элементами массива ітадез. Но мы можем создать пользовательский 
массив графических объектов: 
рісО = пек Ітаде {); 
рісО.згс = ' гесМагС .діЕ '; 
ріеі = пей Ітаде (); 
ріеі.зге = ’Ыиейаг^.ді^'; 


// Создаем массив рисунков 

рісА = пем Аггау(рісО,ріс1,ріс2,рісЗ,...) ; 



Воспользуемся массивом графических изображений 
для создания простейшего эффекта анимации. Помес¬ 
тим на \ѴеЬ-стра ницу ряд цветных стрелок, которые 
будут двигаться в направлении справа налево. Для 
этого введем код листинга 6.6. 
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Листинг 6.6. Бегущие огни 

<нтмв> 

<НЕАР> 

<ТІТЬЕ>Гирлянда</ТІТЬЕ> 

<5СКІРТ> 

// Загрузка рисунками массива рісА 
НипсСіоп Іоайітадее () { 
рісО = пек Ітаде(); 
рісО.згс = 'ітадезѴХгедбагЬ.діі'; 
рісі = пек Ітаде(); 
рісі.згс = ' ітадезХХЫиесІагѣ.діІ*; 
ріс2 = пек Ітаде{); 
ріс2.згс = * ітадезѴХдгпсІагі: .діі 1 ; 
рісЗ = пек Ітаде(); 
рісЗ.згс = ’ітадезХѴуеІІбагС.діЕ'; 
рісА = пек Аггау(ріс0,ріс1,ріс2,рісЗ); 

} 

// Программа анимации 
ІипсСіоп апітаСеО { 

// сброс текущего таймера 
іі (доіпд) 

сІеагТітеоиР(Ьітег); 

Іог ( Іоор=0; 1оор<4;1оор++) { 

іпйех = (іпдех<3) ? ++іпйех : 0; 

йоситепС .ітадез[іпйех]. зге = рісА[1оор] .зге; 

} 

іпйех—; 

Сітег = зеІіТітеоиі{"апітасе() ■,200); 

} 

// Все функции приостанавливаются, пока не будет 
// загружен на МеЪ-страницу последний рисунок 
Іипсііоп сЪескІоайО { 

іі (рісЗ.сотрІеТе == іаізе) 

сітег = зеСТітеоиІ: {"сЪескІоасЦ)', 100) ; 


</8СНІРТ> 

</НЕАГ)> 

<ВСЮУ> 
<5СЕІРТ> 
Іоайітадез(); 
іпйех - 0; 
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доіпд = іаізе,- 
Сітег = пиіі; 
сЬескІоасЗ () ; 

</БСЕІРТ> 

<РхІМС 5КС=' ітадезХгесісІагІ: .діі ’ > 

<ІМС ЗКС='ітадез\уе11сіагі:.діі*> 

<ІМС ЗКС=' ітадезХдгпсіагі: .діі ’ > 

<ІМС ЗКС='ітаде5\Ыііес1агІ:.діі:’> 

</Р> 

<РОКМ> 

сШРШ 1 ТУРЕ= 'ЬиССоп' ѴАШЕ^"Включить" (ЖСЫСК="доіпд = Тгие; 
апітаСеІ); "> 

«сІЫРШ 1 ТУРЕ^ЪиСЬоп' ѴАШЕ=’Выключить" 0МСЬІСК="с1еагТігоеоиС 
(Сітег);"> 

</РОКМ> 

</ВСЮѴх/НТМІ>> 

Сценарий может показаться вам сложным, поэтому давайте рас¬ 
смотрим его подробно. 

Результат выполнения сценария показан на рис. 6.8. 



- о >-■*»•** у'***»* 


( ѴЫП*ЛЛ"Ѵи 


Рис. 6.8. Анимация «Бегущие огни* 

Четыре разноцветные стрелки в окне обозревателя постоянно сменя¬ 
ют друг друга в направлении справа ігалево, Бесконечное чередование 
стрелок обеспечивается следующим циклом в теле функции апітаіе: 
іог (1оор=0;1оор<4;1оор++) { 

іпйех = (іпсІехсЗ) ? ++іп<іех : 0; 

(Зоситепі . ітадез[іпсЗех] .зге = рісА[1оорІ .зге; 

} 

ішЗех—; 
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Переменная іпсіех определяет элементы стандартного массива 
ітадез, тогда как переменная Іоо используется в качестве индекса 
массива графических объектов рісА, созданного ранее в функции 
Іоасіітадез. В строке босшпепг. ітадез [ іпсіех] . зге = рісА[ Іоор] . 
зге; происходит копирование графическою объекта из массива рісА в 
элемент массива ітадез, представленного соответствующим дескрип¬ 
тором <ІКС> в коде НТМБ. В результате графический объект стано¬ 
вится видимым в окне обозревателя в том месте, где в коде НТ МВ на¬ 
ходится соответствующий дескриптор <ІМС>. Благодаря строке кода 
іпсіех = ( іпсІех<3 ) ? ++ іпсіех : 0; графические объекты выносятся 
на экран последовательно. В самом деле, значение переменной іпсіех 
увеличивается на единицу при каждом выполнении цикла, пока не до¬ 
стигнет значения 3, после чего іпсіех принимает значение 0. Таким 
образом, іпсіех может быть равным 0, 1, 2, 3. Благодаря оператору 
іпсіех — за телом цикла при каждом ноном вызове функции апішасе 
начальное значение переменной іпсіех смещается с шагом в единицу. 

л ’Ч Вам может быть не понятно, зачем понадобился сброс 

Г На заметку] таймера 

X ІЕ (доіпд) 

сІеагТітеоиС. (Еітег) ; 

в начале функции апітасе. Если вы удалите эти строки 
то увидите странный эфгѣект: каждый раз после щелчка 
на кнопке Включить скорость мигания цветных стрелок 
будет возра< тать вдвое. Дело в том, что если не сбрп 
сить текущий таймер то вызов функции тпітасе щелч¬ 
ком на кнопке будет запускать параллельный процесс, 
в результате чего скорость анимации удвоится. Чтобы 
остановить анимацию вам придется затем столько же 
раз щелкнуть на кнопке Выключить. Впрочем, получится 
довольно интересный эффеі г который ..южет приго¬ 
диться вам на практике. 

Обратите также внимание на функцию сЬесхІоаф кото¬ 
рая проверяет, был ли загружен на ѴУеЬ- страницу послед¬ 
ний графический объект. При испытании сценария на 
своем компьютере эта функция не иі іеет значения Но на 
реальной ѴѴеЬ стоанице отсутствие проверки может при¬ 
вести * ошибке из за того, что сценарий обратится к гра¬ 
фическому объекте, которого на странице пока еще нет, 
поскольку он не успел выгрузиться по медленной сети 
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Назначение гиперссылок областям изображения 

В главе 2 вы узнали, как с помощью дескриптора <А> преобразо¬ 
вать фрагмент текста или рисунок в гиперссылку Но этим ваши воз¬ 
можности не исчерпываю гея. Интересный прием состоит в разделе¬ 
нии изображения на области, каждой из которых можно назначить 
свою гиперссылку. Такой прием удобно использовать, например, при 
создании карты АУеЬ-узла для навигации по его страницам. Пред¬ 
положим, что вы создаете ШеЬ-узел с описанием технических ха¬ 
рактеристик автомобиля. Можно спланировать узел следующим об¬ 
разом. На начальной странице поместите изображение автомобиля 
и выполните разметку изображения таким образом, чтобы щелчок 
мыши на узле или агрегате открывал \ѴсЬ-стран ицу с соответствую¬ 
щим описанием. 

Ѳ Выполните следующие действия. 

1. Подберите или создайте необходимый рисунок. 

2. Добавьте рисунок на \ѴеЬ-страницу с помощью де- 
Яэ скриптора <ІМС>. 

3. В любом месте НТМЬ-кода страницы в разделе <ВСЮУ> соз¬ 
дайте элемент разметки страницы с уникальным именем: <МАР 
КАМЕ= * имя _ разметчика 1 >...</МАР>. 

4. В дескрипторе <ІМС> рисунка присвойте атрибуту ІІ8ЕМАР имя 
элемента разметки. (Имя элемента разметки следует после 
символа #.) 

5. Между открывающим и закрывающим дескрипторами элемен¬ 
та разметки рисунка добавьте области с помощью дескрипто¬ 
ров <АКЕА> и установите следующие атрибуты областей: 

• 5НАРЕ — присвойте стандартные значения формы об¬ 
ласти гесЪ (прямоугольник), сігсіе (окружность), 
роіудоп (многоугольник) и йе^аиІЬ (незанятая часть 
рисунка); 

• С00КШ пары координат х и у в пикселях для верхней 
левой и нижней правой точек прямоугольника, всех то¬ 
чек многоугольника и центральной точки с радиусом 
окружности; 

• ШЕР — Іі КВ-адрес гиперссылки; 

• ТІТЬЕ текст экранной подсказки. 
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Чтобы определить координаты области, откройте изо¬ 
бражение в графическом редакторе. Большинство при¬ 
ложений указывают в окне Іпіо (Информация) или в 
строке состояния текущее положение курсора — рас¬ 
стояние в пикселях от верхнего левого угла изображе¬ 
ния. Именно эти координаты необходимо присвоить 
атрибутам С00КБ8 дескрипторов <АКЕА>. Если на стра¬ 
нице размеры рисунка изменены с помощью атрибутов 
иібтн и неіснт, вам придется пропорционально пере 
считать координаты областей. 

В листинге 6.7 показан пример разметки рисунка для создания 
карты ѴѴеЬ-узла. 

Листинг 6.7. Назначение гиперссылок областям рисунка 

<нтмь> 

<НЕАБ> 

<ТІТЬЕ>Нуипдаі</ТІТЬЕ> 

</НЕМ)> 

<ВОБУ> 

<Н2>Модель 7710К92</Н2> 

<ІМС 5КС=' ішадеБ/7710М92 .трд' ВОКБЕК^'О' КІСТН= , 640' 
НЕІСНТ=’425* БЗЕМАР=' #ішадешар '> 

<МАР ЫАМЕ-' ітадешар '> 

<АЕЕА 8НАРЕ= ’сігсіе' СООКБ8=’389, 312, 52' 

НКЕР= * сЬаБВіз^Ыип* ТІТЬЕ- ' Ходовая' > 

<АЕЕА 5НАРЕ=' роіудоп * С00К03=’374, 184, 168, 158, 130, 
225, 248, 237' НКЕР=' епдіпе.ЬСго' ТІТЬЕ='Двигатель*> 
<АЕЕА 8НАРЕ='гесС' СООЕБ8='205, 99, 544, 160‘ 
НКЕР^еаХоп.ЪСт' ТІТБЕ^ * Салон * > 

</МАР> 

</ВОБУх/НТМБ> 

Расположение областей на рисунке можно посмотреть в профес¬ 
сиональном редакторе \УеЪ-страниц М іеговой РгопТРа^е, как показа¬ 
но на рис. 6.9. А внешний вид страницы в окне обозревателя приведен 
на рис. 6.10. 

В листинге 6.7 вы познакомились с постоянными областями ри¬ 
сунка. Ниже в разделе «Создание объектов мультимедиа с помощью 
дескриптора <ОВДЕСТ>» вы узнаете о возможности динамического 
создания и изменения областей с помощью сценариев. 





192 


Глава 6 



Прямоугольная, полигональная и 
округлая области рисунка, созданные 
с помощью дескрипторов <АЯЕА> 


Рис. 6.9. Области разметки рисунка 
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Рис. 6.10. Внешний вид рисунка с областями в окне обозрева¬ 
теля Іпіетеі Ехріогег 
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Воспроизведение звуковых 
и видеоклипов на ѴѴеЬ-странице 

В языке )аѵа8сгірІ нет никаких функций для непосредственного 
контроля за воспроизведением аудио- или видеофайлов, но предусмо¬ 
трены функции управления стандартными проигрывателями мульти¬ 
медиа С помощью сценариев можно настроить требуемым образом 
работу проигрывать ™ей, встроенных в приложение обозревателя. 

Возможности обозревателя можно расширить за счет 
устаі ювки на компью ере дополнительной программы 
(плагина). Например, для просмотра файлов в формате 
РОР используется АсгоЬаІ Веагіег, а для воспроизведения 
звуковых файлов ІІѴеАисІю Указанные программы на 
столько широко распространены что многие считают их 
обязательными составными частями ооозревлтелеи На 
самом деле это не так, в результате чего объекты мульти¬ 
медиа, добавленные вами на ѴѴеЬ-страницу, могут ока 
заться недоступными для некоторых пользователей. 

Использование внедренных проигрывателей 

Для внедрения проигрывателей и файлов мультимедиа в доку¬ 
мент НТМЬ применяется дескриптор <ЕМВЕР>. Обозреватель разли¬ 
чает формат внедренного файла и добавляет на страницу элементы 
управления, необходимые для контроля за воспроизведением файла 
данного формата. В дескрипторе <ЕМВЕО> устанавливаются следую¬ 
щие атрибуты: 

♦ 8КС — имя файла и путь к файлу мультимедиа, или ІЖЬ-адрес; 

♦ НЮБЕЫ — если этот атрибут установлен, элементы управления 
воспроизведением файла скрыты; 

♦ ѴШЭТН — ширина рамки для элементов управления воспроизве¬ 
дением файла; 

♦ неіснт - высота рамки для элементов управления воспроиз¬ 
ведением файла; 

♦ АЫОЫ параметры выравнивания рамки с элементами управ¬ 
ления в окне обозревателя: 
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• Іебс — влево; 

• гідЫ; — вправо; 

■ сепбег — по центру; 

♦ аитобтакт — устанавливает автоматическое воспроизведение 
файла при открытии Ѵ/еЪ-страницы; 

♦ ігООР — устанавливает режим воспроизведения по циклу. 
Атрибут НІББЕК устанавливается обычно при внедрении аудио¬ 
файла для фонового сопровождения. Например, если вы хотите про¬ 
сто добавить звуковое сопровождение из файла Ьаскдгоипд.шій, 
которое будет воспроизводиться автоматически сразу после загрузки 
\ѴеЬ-страницы, введите в разделе <ВОІ)У > следующий дескриптор: 

Ѳ <ЕМВЕБ 5КС='ЪаскдгоипсипйсР НІББЕЫ=ТІШЕ> 

Ниже показаны примеры внедрения проигрывате¬ 
лей аудио- и видеофайлов. Введите в раздел <ВОБУ> 
документа НТМЬ код листинга 6.8. 

Листинг 6.8. Внедрение проигрывателей аудио- и видеофайлов 
<!- Добавляем фоновый звук —> 

<ЕМВЕВ ЗКС='ЬдзошкЗ .тіб ' НІБВЕЫ АБТ05ТАКТ='бгие’ БООР='бгие'> 

<!- Добавляем звуковой файл —> 

<Р>Прослушайте запись моего концерта</Р> 

<ЕМВЕВ 5КО ' МуМиз і с . ші б' ШБТН= , 200' НЕІСНТ=*25' 

АИТОБТАКТ=' іаізе’ > 

<Р>&пЪзр</Р> 

<Р>&пЬзр</Р> 

<!- Добавляем видео —> 

<Р>Время</Р> 

<ЕМВЕВ ЗЕС=' сіоск.аѵі * МІБТН=' 200' НЕІСНТ=*200' 

АЫСИ^'сепбег 1 АБТ05ТАКТ='бгие' ЕООР='бгие*> 

Прежде чем открывать полученный файл в обозревателе, выпол¬ 
ните следующие действия. 

1. Скопируйте в папку документа необходимые аудио- и видео¬ 
файлы. (Образцы файлов вы можете найти в папке \Ѵіпбоѵ/5 на 
вашем компьютере или в Интернет.) 

2. Измените значения атрибутов <ЕМВЕБ ЗКС= * ?' > в соответствии 
с именами ваших файлов или переименуйте файлы. 
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3. Откройте \ѴеЪ-стран ицу в обозревателе. Она будет выглядеть 
примерно так. как показано на рис. 6.11. 



Аудиопроигрьватель 


Видеопроигрыватель 


Рис. €.11. Внедренные проигрыватели аудио- и 
видеофайлов 


Файл Ъдзоипй.шід автоматически начнет воспроизводиться по 
циклу в фоновом режиме. Автоматически по циклу также будет вос¬ 
производиться видеоклип. Чтобы прослушать файл МуМивіс.піій. 
щелкните на кнопке Воспроизводить в соответствующей группе эле¬ 
ментов управления, как показано на рис. 6.11. 

Файлы мультимедиа не будут воспроизводиться в не¬ 
которых устаревших обозревателях или в тех при л о 
жениях, в которых данные параметры были отключены 
пользователями Чтобы сообщить пользователю о том. 








196 


Глава 6 


что страница содержит недоступный для него объект 
мультимедиа, введите альтернативный текст вроде 
следующего: 

<ШЕМВЕО>Влш обозреватель не поддерживает вос¬ 
произведение внедренных файлов мультимедиас/ 
ЫОЕМВЕР> 

Управление звуковыми файлами 

Проигрыватель ІлѵеАисІіо поддерживает воспроизведение файлов 
следующих форматов: 

♦ АП - формат, разработанный компанией 5иіі для использова¬ 
ния в программах на языке фіѵа; 

♦ АІРР — формат компьютеров Арріе; 

♦ иаѵ широко распространенный формат \Уіп(1о\ѵ$ для записи 
звуков и речи; 

♦ мібі стандартный формат для сохранения цифровой музыки. 
Если на вашем компьютере РС установлен микрофон и звуко¬ 
записывающее программное обеспечение, вы можете записать свои 
комментарии в файлах формата Ѵ/АѴ и добавить их на Ѵ/еЬ-страницу. 

Звуковые файлы обычно занимают много места, что 
существенно замедлит выгрузку ѴѴеЬ-страницы по Ин 
тернет. В среднем 1 с звука в формате ѴѴАѴ занимает 
22 Кбайт. Файл такого же размера в формате МЮІ будет 
соответствовать нескольким минутам звукозаписи. 

Методы управления воспроизведением звука 

Для взаимодействия с внедренным на \ѴеЪ-г границе проигрыва¬ 
телем ІлѵеАікІіо в ^ѵа5сгірІ используются следующие методы: 

♦ р1ау() запускает воспроизведение звукового файла; 

♦ раиве() приостанавливает выполнение звукового файла, 
следующий вызов функции ріау продолжает воспроизведение 
с того места, где запись была остановлена; 

♦ вбор () — останавливает выполнение звукового файла, следую¬ 
щий вызов функции ріау начинает воспроизведение сначала. 
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Выполнение этих методов можно назначить любым событиям эле¬ 
ментов \ѴеЬ-страницы. Так, в следующем примере мы создаем кнопки 
для управления скрытым проигрывателем ІлѵеАікІіо: 

<ЕМВЕБ ІБ= 1 зоигкЗ' Ш\МЕ='зоигкЗ' 5РС='Ъдзоипй .маѵ ' НЮОЕЫ 
АІІТ03ТАКТ= ' Еаізе '> 

<РОКМхР> 

сШРШ 1 ТУРЕ=‘ЬиЬТоп’ ѴАШЕ=' Воспроизвести' ОЫСЫСК-'Боипй. 
ріау ();• • 

сШРІЛ* ТУРЕ= 1 ЬиЫіоп ' ѴАПШ= 1 Пауза 1 ОЫСЬІСК- 1 зоипй.раизе();'> 
<Н*РЦТ ТУРЕ^'ЬиЬГогГ ѴАШЕ= 'Остановить* ОЦСЬІСК^ ' зоипй . 
зСор(); 1 > 

</Рх/ЕОКМ> 

Данные методы могут быть присвоены любым другим событиям, 
например щелчку на гиперссылке, открытию или закрытию докумен 
та и пр., что открывает перед нами неограниченные возможности по 
управлению звуковым сопровождением в ходе работы пользователя 
с \ѴсЪ-страницей. 


Массив внедренных объектов мультимедиа 

На Ѵ/еЬ-странице можно использовать много разных звуков и виде¬ 
ороликов, добавленных с помощью дескриптора <ЕМВЕБ>. Все объекты 
мультимедиа, созданные таким способом, автоматически добавляют¬ 
ся в стандартный массив етЪейз в том порядке, в каком дескрипторы 
<ЕМВЕБ> следуют в коде НТМЬ (подробнее о стандартных массивах 
обозревателя рассказывалось в главе 4). К каждому из объектов мы 
можем обратиться по индексу в массиве ешЬейз и вызвать для него 
метод воспроизведения, паузы или остановки. 

Ѳ Предположим, что на ѴѴеЬ-стран ице используется семь 
звуковых файлов. Давайте создадим кнопки для выбо¬ 
рочного воспроизведения файлов, воспроизведения 
0 всех мелодий по циклу и кнопку случайного выбора. 
О Рассмотрим листинг 6.9. 


Листинг 6.9. Использование массива внедренных звуков 

<нтмь> 

<НЕАБ> 

<ТТТЬЕ>Гамма< /ТІТЬЕ> 

<5СКІРТ> 
поЬе = 0 ; 

ЕипсСіоп р1ау_зса1е() { 
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(Хосшпепб. етЪесЗз [поЪе! . ріау (); 
по1е++; 

іХ (побе < сіоситепб .етЬесЗз .ІепдбЪ) 
зебТітеоиб ("р1ау__зса1еО * ,2000); 
еізе 

побе = 0; 

} 

Хипсбіоп гагкЗош_р1ау () { 

і - МабЬ. Хіоог (МабЬ . гапсіот () *(Зоситепб . етЬесіз. ІепдбЪ); 
«Зоситепб. еліЪесЗз [ і 1. ріау (); 

} 

</ЗСРІРТ> 

</НЕАО> 

<ВСЮУ> 

<!- Добавляем фоновый звук —> 

<ЕМВЕБ ЗКС= ' зоипсЗзѴсІо.ѵ/аѵ' НІЕЮЕИ АЕТОЗТАКТ^' Ха1зе'> 
<ЕМВЕО 5КС='зоипсіз\ге.каѵ 1 НІББЕМ АІІТ03ТАКТ=' Хаізе' > 
<ЕМВЕБ 5КС= 1 зоигкЭе\ші.каѵ■ НІБЕЕИ АОТОЗТАКТ^'Ха1зе*> 
<ЕМВЕБ 5ЕС=' зоипйз \Ха.наѵ' НІБСЕМ АбТОЗТАНТ^’Хаізе*> 
<ЕМВЕБ 5КС=’зоипсіз\зо1 .ѵ/аѵ' НІЕОЕИ АОТОЗТАКТ^ ' Ха1зе'> 
<ЕМВЕР 8КС= * зоипсЗз\Іа.маѵ' НІБОЕЫ АОТОЗТАКТ= ' баізе' > 
<ЕМВЕБ 5КС=' зоипсіз\зі -ѵ?аѵ' НІБОЕЫ АІІТ05ТАКТ=' баізе' > 
<РОКМ> 

<Р> 


•«ШРОТ ТУРЕ='Ъиббоп' 

ѴАШЕ= 1 

1 До 

етЪебз [ 0 3 . ріау (); " > 
<ШРОТ ТѴРЕ=' Ъиббоп* 

ѴАШЕ= 1 

1 Ре 

етЪебз [1].ріау();*> 
<П1РЦТ ТУРЕ- ' Ъиббоп' 

ѴАШЕ=' 

' Ми 

етѣебз[2].ріауО;"> 
<ПИ*ЦТ ТУРЕ='Ъиббоп' 

ѴАЫІЕ= 1 

1 Фа 

етЪебз [3] .ріау() ;"> 
<ІМРЦТ ТУРЕ=*Ъиббоп' 

ѴАШЕ=' 

' Соль' 

етЪебз [4].ріау();"> 
сІЫРИТ ТУРЕ='Ъиббоп' 

ѴАШЕ=' 

1 Ля 

етЪебз 151.ріауО;■> 
<П*РЦТ ТУРЕ=’Ъиббоп' 

ѴАШЕ= 1 

1 Си 


ОЖХІСК=" Йоситепб . 
(ЖСІДСК=" босшпепб . 
ОЫСЫСК=" боситепб . 
<ЖХІСК= "босшпепб . 
ОЫСЫСК^ "босшпепб . 

(ЖСЫСК= "босшпепб. 
(ЖСЫСК= "босшпепб. 

(ЖХІСК='р1ау_ 

ОЫСЫСК=' гапбот. 


етЪебз[6].ріау{);"><ВК> 

<ІЫРОТ ТУРЕ= 'Ъиббоп' ѴАШЕ='Играть гамму' 
зсаІеО ; '> 

сШРІІТ ТУРЕ= 'Ъиббоп' ѴАШЕ='Случайный выбор’ 
ріау();' > 
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</Р> 

</РОКМ> 

</ВООТх/НТМЬ> 

Наша \ѴеЪ-страница содержит набор командных кнопок, как по¬ 
казано на рис. 6.12. 

ЦП 

Рис. 6 . 12. Кнопки для воспроизве¬ 
дения звуковых файлов из массива 

етЬеёв 


Кнопки верхнего ряда от До до Си воспроизводят отдельные зву¬ 
ковые файлы, хранящиеся в массиве йосишепС .етЪеЙБ. Все очень 
просто: каждая кнопка обращается к своему элементу массива и вы¬ 
зывает для него метод ріау. 

Кнопка Играть гамму вызывает на выполнение функцию р1ау_ 
ясаіе, определенную в сценарии в разделе заголовка. Функция по¬ 
следовательно вызывает на выполнение элементы массива етЪейв с 
индексами от 0 до йосшпепС. етЪейз. ІепдНЪ - 1. 

/ѵ/\ Казалось бы логичным для обращения к элементам мае 

СвіИіШШІМС^ СИВа воспользоваться Циклом Іог: 

I _ / Еог (поЬ.е-0;поСе<йоситепІ:.еіпЬеЙ5.1епдСЬ;поІ:е++) 

йосшіепС . етЬейз [ поре ] . ріау (); 

О ,, 

Но вместо последовательного выполнения звуковых 
файлов мы получим какофонию звуков. Вызов следу¬ 
ющего файла на воспроизведение будет происходить 
в цикле значительно быстрее, чем первый файл успеет 
завершиться. Чтобы выделить достаточно времени на 
исполнение каждого звукового клипа, воспользуйтесь 
методом зеРТітеоиС. 

Следующая кнопка, Случайный выбор, воспроизводит один из звуко¬ 
вых файлов. Для случайного выбора элементов массива используется 
рандомайзер МаСЬ. 1 Іоог (МаСЪ . гапйот () *йоснтепС. етЬейз. ІепдіЬ) , 
который возвращает целые числа в диапазоне от 0 до йоситепі. . 
ешЪейе. ІепдСЪ - 1. 
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Создание объектов мультимедиа 
с помощью дескриптора <ОШЕСТ> 

Для работы с объектами в код НТМЬ был добавлен новый пар¬ 
ный дескриптор сОВЛЕСТх /<Ж7ЕСТ>, который, благодаря своей уни¬ 
версальности, не только стал стандартом для всех обозревателей, но 
и вытеснил из языка НТМЬ некоторые более ранние дескрипторы. 
Дескриптор <0ЕиіЕСТ> может применяться в следующих целях: 

♦ добавление аплетов (небольшие программы, которые автома¬ 
тически выгружаются по сети вместе с ЛѴеЬ-стран ицей и вы¬ 
полняются на машине пользователя); 

♦ добавление изображений в любом формате, поддерживаемом 
обозревателем; 

♦ добавление некоторых элементов \ѴеЬ-стран и цы, пап ример пла¬ 
вающих рамок. 

Ранее для добавления аплетов использовался дескрип¬ 
тор <АРРЬЕТ>. Недостатком данного дескриптора было 
то, что он поддерживал только аплеты, написанные на 
)аѵа. Дескриптор <0ВТЕСТ> позволяет внедрять на ѴѴеЬ- 
страницу программы разных типов, включая элементы 
управления АсйѵеХ, аплеты на языке РуіЬоп, исполня¬ 
емые файлы и пр. Дескриптор <аррьет> рассматри 
вается как устаревший, поэтому удален из стандартов 
языка НТМС 

Ниже показан пример добавления на ѴѴеЪ-страницу изображения 
из файла с помощью атрибута <ОВЛЕСТ>: 

сОВЛЕСТ БАТА^' ікіадез/зеа. эрд* ТУРЕ="ітаде/эред" ИІБТН =, 650' 
НЕІСНТ= ' 350 1 ИЗЕМАР^' #ііладетар ’ > 

Игровое поле для игры в морской бой</0ВЛЕСТ> 

Следует учесть, что рисунки, добавленные с помощью 
атрибутов <овлестх/овлест>, не становятся членами 
стандартного массива ііпадее. 

Текст, заключенный между нарой дескрипторов <ОВЛЕСТ></ОВ.7ЕСТ>, 
является альтернативным текстом и отображается на экране только в 
том случае, если сам объект не поддерживается обозревателем. Как 
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вы видите в примере выше, набор атрибутов графического объек¬ 
та. добавленного с помощью дескриптора сОВДЕСТх соответствует 
атрибутам дескриптора <ІМС>. В действительности набор атрибутов 
сОВІЕСТ > значительно шире, чем у какого-либо другого дескриптора 
НТМЬ. Универса тыюсть имеет свою цену: при установке атрибутов 
<ОВі1ЕСТ> следует учитывать тин добавляемого объекта. Некоторые 
атрибуты становятся бессмысленными, а смысл других радикально 
меняется в зависимости от типа объекта. Некоторые наиболее исполь¬ 
зуемые атрибуты дескриптора <0ЕИЕСТ> перечислены в табл. 6.1 

Таблица 6.1. Атрибуты дескриптора <овдест> 

Атрибут Описание 

Атрибуты объявления объекта 

сата Путь к файлу-первоисточнику В качестве пути можно 

указать IIК Ь адрес 

туре Тип объекта в соответствии с классификацией ІпіегпеТ 

Месііа Туреь (типы данных Интернет). Вот некоторые 
примеры типов объектов: 

•Чшаде/эрд" — изображение в формате 1РС, 
"ігпаде/діС" — изображение в формате СЫР; 
"аррІісаГіоп/х-кеЬіопГ" — шрифт \Л/еЬ-страницы 
ССЮЕТѴРЕ Язык программирования 

ВЕСЬАКЕ Индикатор виртуального объекта, который использу¬ 

ется в качестве прототипа для создания экземпляров 
других объектов 

ГО и маме Уникальные дескрипторы объекта в коде НТМ1_, позво¬ 

ляющие обращаться к объекту из сценариев 1аѵа5сгірІ 

Атрибуты форматирования объекта 

аысы Выравнивает объект в тексте ѴѴеЬ- страницы 

иіотн и неіснт Ширина и высота рамки объекта 
БОКОЕК Прорисовка границ объекта 

Н5РАСЕ Размер поля слева и справа от объекта 

Ѵ2РАСЕ Размер поля над и под объектом 

5ТАШВѴ Строка текста, отображаемая во время выполнения 

программы объекта 

Другие атрибуты 

ІІБЕМАР Имя схемы областей рисунка, созданной с помощью 

дескриптора <іш 
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Атрибут 


Наличие в рисунке областей с установленными гилерс- 


Все атрибуты объекта могут быть установлены или изменены ди¬ 
намически с помощью сценариев. Таким образом, даже тип объекта, 
созданного с помощью дескриптора <<ЖІЕСТ> может быть изменен в 
ходе работы с \ѴеЬ-страницей. Например, рисунок можно заменить на 
N. выполняемый аплет или объект другого типа. 

С Пример ) Чтобы закрепить материалы, изученные нами в этой 
главе, давайте создадим \ѴеЬ-страницу для игры в мор- 
0 0 ской бой. Играть будим следующим образом. 

1. На странице покажем игровое поле — фотография морской гла¬ 
ди с линией горизонта вдалеке. Фотография сохранена в файле 
ІРС и будет добавлена с помощью дескриптора <0ВЛЭСТ>. 

2. Игровое поле разбито на 45 клеток. Десять случайно выбран¬ 
ных клеток содержат корабли неприятеля. Границы между 
клетками-не видны, но при наведении указателя мыши появля¬ 
ется всплывающая подсказка с номером текущей клетки. 

3. Огонь по кораблям противника ведем с помощью мыши. Если 
щелчок выполнен на пустой клетке — слышен звук улетающе¬ 
го снаряда. Если клетка содержала корабль — слышен взрыв, 
число кораблей уменьшается на единицу и клетка становится 
пустой. 

4. Программа показывает число кораблей противника, которые 
все еще плавают но морю, и подсчитывает число выстрелов. 
(Чтобы облегчить отладку программы, выведем на экран так¬ 
же информацию о том, в каких клетках находятся корабли. 
В конечной версии программы эту часть кода следует удалить.) 
Нужно потопить все корабли противника, выполнив мини¬ 
мальное число выс грелов. 

5. ѴѴеЬ-страница содержит кнопку Начать новую игру 

Окно программы «Морской бой*» показано на рис. 6.13. 

Давайте рассмотрим код НТМЬ этой \ѴеЬ-страницы, приведен¬ 
ный в листинге 6.10. 
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Рис. 6.13. Морской бой 


Листинг 6.10. Код программы «Морской бой» 

<нтмь> 

<НЕАБ> 

<ТІТЬЕ>Морской бой</ТІТЬЕ> 

<5СКІРТ> 

// Проверяем попадание в корабль и удаляем корабль из массива 
Еипсбіоп зЬооб(п) { 

// Функция завершается, если кораблей больше нет 
і I (зЬірз. ІепдЫі == 0) 
гебигп; 

// Счетчик выстрелов 
соипбег++; 

соипб . іппегТехС = соипбег; 

БбгЗЫрз = зЬір8.эоіп( ; 

ІЕ (збгЗЬірз.ігкЗехОі:(п) >= 0) { 
йосшіепс. етЪебз [ 1 ]. ріау () ; 
іпбех = Сіпй_іпдех(зі:гЗЬірз,п); 
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змібсЬ. (іпдех) { 
сазе 0: 

БЪірБ.зЬіІЬ () ; 

Ьгеак; 

сазе зЬірз. 1епдЬЪ-1: 
зЬірз.рор (); 

Ьгеак; 
йеіаиіь: 

ЬтрЗЪірз - пеѵ/ Аггау () ; 
іог (і=0;і<вЬірБ.1епдЫі;і++) { 
іі (і==іпбех) 
сопЬіпие 
еізе 

ЫпрЗЬірз.ризЬ(зЫрз[і]); 

} 

зЫрз ~ ЬтрЗЪірз; 

Ьгеак; 

} 

ир<іаЬе_еІ:аІ:ІЕкіс5 {) 

} 

еізе 

досшпепЬ. етЬебз [ 0 ] . ріау {) ; 

} 

// Определяем индекс пораженного корабля 
Еипсбіоп 1:ішЗЦіпсІех(8І:г5Ьір5,п) { 
розібіоп = БкгЗЬірз.ігкЗехОІ(п); 
ѵаг іпбех = 0; 
і I (розібіоп) { 

зиЬ_1іеЬ = БІг31іірБ.БиЬ5Ьгіпд{0 г розіІ:іоп); 
зиЪ_аггау = зиЪ_Іізі:.зрііь("$■); 
іпсіех = зиЬ_аггау.ІепдЬЬ - 1; 

} 

геЬигп іпбех; 

} 

II Обновляем текст КеЬ-страницы 
ЕипсЬіоп ирсІаіе^БЬаЬізбісз () { 
ѵаг пит = зЬірв.ІепдЬЬ; 
іі (пит == 1) 

збабізЬісз.іппегТехЬ = пит + " корабль"; 
еізе іі (пит && пит<5) 

збаіізбісБ.іппегТехЬ = пшп + * корабля"; 
еізе іб (пит>4) 
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збабізбісз . іппегТехб = гшш + " кораблей"; 
еізе { 

вбабізбісз.іппегТехб = пші + " кораблей"; 
аіегб ("Вы победили»"); 

} 

// Эту строку нужно удалить в окончательном 
// варианте ИеЪ-страницы 

Ббабізбіез.іппегТехб " “ + зЪірз .боЗбгіпдО ; 

} 

</ЗСКІРТ> 

</НЕАО> 

<В00У> 

<Н2>Морской 6ой</Н2> 

<0ВЛ2СТ ІБ='ітдОЪз 1 ЫАМЕ= *ітдОб^ 1 БАТА= 1 ітадез/зеа. 

Зрд* ТУРЕ= ■ і гладе /^ред" ИТБТН^'650' НЕІСНТ^’350' 

СІ5ЕМАР-' #ішадешар' > 

Игровое поле для игры в морской бой<-/(ЖШСТ> 

<Р>Сейчас на море <2РАМ 10="збабізбісз' МАМЕ='збабізбісз'></ 
БРАЫх/Р> 

<Р>Выполнено выстрелов : сЗРАЫ ІБ='соипб' б)АМЕ='соипб'>0</ 
8РА№х/Р> 

<Р0КМхШРЦТ ТУРЕ= 'Ьиббоп' ѴАЬ0Е= 'Начать новую игру* 

0ЖЫСК= ' сіосшіепб. Іосабіоп.геІоасЦ) ' ></Р0КМ> 

<МАР Ю= * іпіадетар' NАМЕ : =' іпіадетар' ></МАР> 

<ЕМВЕО ЗКС= * БОипсЗзХтізБ .ѵ/аѵ' НЮОЕИ АбТ05ТАКТ= ’ іаізе' > 
<ЕМВЕО 5КС = * зоигкЗз \ біі б . ка ѵ' НЮБЕЫ А1ГТ0БТАКТ= * баізе * > 
<5СКІРТ> 

// Создаем массив кораблей 
ѵаг зЬірв = пей Аггау(ІО); 
ѵаг зЬір = 0; 

ѵ/ЬіІе (зЬір < зЫрз. ІепдбЪ) { 

п = МабЪ. гоипсі { МабЪ. . гапсіот 0*44); 

БбгЗЪірз = зЪірз.боЗбгіпдО ; 

//в массив добавляются только неповторяющиеся значения 
і€ {8бг5Ы_р8. іпсіехОб (п) >= 0) 
сопбіпие 
зМрБ [зЫр] = п; 
зЪір++; 

) 

ѵаг соипбег = 0; 

// Создаем области рисунка 

ѵаг тарОЪі = йосишепб .дебЕІетепбВуІсК"ітадетар"); 
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ѵаг п = 0; 

Еог (х=0;х<600;х +- 120) { 

Еог (у=30;у<300;у += 30) { 

агеа = йоситепб. сгеаЬеЕІешепЬ {"АКЕА"); 
агеа.зЬаре - 1 гесо'; 

агеа.соогдз =х+ "," + у + (х+120) + + (у+30); 

агеа.ЬгеЕ = " іаѵаесгірЬ :бЬооЬ(" + п + ")"; 

агеа.ЫЫе = "клетка ■ + п; 

тарОЪі. аррепдСМ Ій (агеа); 

п++; 

} 

} 

ирйаЕе^вЕаЕізЕісз () 

</5СКІРТ> 

</ВСЮУх/НТМЬ> 

Рисунок на \ѴеЬ-страницу лобавляется с помощью дескриптора 
<(ЖЗЕСТ> с установкой линейных размеров рамки объекта и имени 
схемы областей рисунка. 

Размеры рамки объекта должны быть примерно на 
50 пикселей больше размеров самого рисунка. Если рам¬ 
ка объекта будет меньше изображения, появятся по¬ 
лосы прокрутки. 

Затем в основном разделе \ѴеЬ-страницы вводятся заголовки и ба¬ 
зовый текст сообщений о числе кораблей и выстрелов. В тексте с по¬ 
мощью дескрипторов <8РШ>...</8РА№> выделены именованные фраг¬ 
менты, которые будут редактироваться динамически. 

Кнопка Начать новую игру просто выполняет перезагрузку \ѴеЬ- 
страницы с помощью команды босишепЕ. Іосаеіоп.геіоай (). 

Затем следует код сценария. Сначала мы создаем массив зЬірз 
размером в 10 элементов. Массив заполняется целыми числами, слу¬ 
чайно сгенерированными в диапазоне от 0 до 44. Обратите внимание, 
как с помощью оператора іЕ мы проверяем, чтобы в массиве не было 
повторяющихся значений. 

В следующей части кода сценария мы создаем области рисунка 
(клетки игрового поля): 

// возвращаем объект <МАР> 

ѵаг шарОЬз = йосшпепб.деСЕ1етепЬВуІд("ітадетар") ; 
ѵаг п = 0; 
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// создаем смежные области, заполняющие все 
// пространство рисунка до линии горизонта 
бог (х=0;х<600;х += 120) { 
бог (у=30;у<300;у +=30) { 

// создаем новый элемент <АКЕА> 
агеа = досшпепб .сгеабеЕІешепб { "АКЕА" ); 

// определяем атрибуты области 
агеа. зііаре = ' гесб'; 

агеа.соогйз =х+ + у + (х+120) + "," + (у+30); 

агеа.іігеб = "заѵаБегірсгвізооб (" * п + 
агеа.бібіе = "клетка " + п; 

// добавляем область в объект <МАР> 
тарОЪі .аррепсЗСЫ 1(3 (агеа) ; 

П++; 

} 

} 

Некоторые методы в данном фрагменте кода вам не знакомы. 
Прежде всего мы возвращаем переменную объекта схемы областей, 
созданного в коде НТМЬ с помощью дескриптора <МАР> по значению 
атрибута ГО: (Зосшпепб .дебЕІетепбВуІсЗ (" ітадетар" ). 

Метод дебЕ1етепбВуІ<3(ІР) можно использовать для 
возвращения в код сценария объекта любого элемента 
ѴѴеЬ-страницы, в дескрипторе которого был установлен 
уникальный атрибут го. Заметьте, что в данном случае 
не создается новый объект, а просто открывается до¬ 
ступ к уже существующему объекту для его динамиче¬ 
ского изменения. 

Затем известным вам методом сгеагбеЕІешепб создается новый 
объект области рисунка и устанавливаются его атрибуты (подроб¬ 
но создание областей рисунка мы рассматривали выше в этой гла¬ 
ве, в разделе «Назначение гиперссылок областям изображения»). 
Обратите внимание на то, как мы формируем значения атрибутов из 
текстовых констант и переменных сценария. После завершения уста¬ 
новки атрибутов область добавляется в родительский объект <МАР> с 
помощью метода аррегкЗСЪіІсЗ. 

Атрибутам НКЕР во всех областях рисунка присваивается выпол¬ 
нение функции зЬооТ, определенной в сценарии в разделе заголовка 
\ѴеЬ-страницы. В аріументе функции передается номер текущей ячей¬ 
ки. Функция проверяет, содержится ли данный номер в массиве ко- 
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раблей БІіірБ. Если номер присутствует в массиве, то данный элемент 
удаляется н в тексте сообщения на \ѴеЬ-странмце выводится новый 
размер массива. При этом звучит аудиофайл і ііі . ѵгаѵ, добавленный с 
помощью дескриптора ,ЕМВЕБ>. Если номер отсутствует, звучит файл 
тізе.маѵ. Нов любом случае выполняется приращение глобальной 
переменной соипСег, с помощью которой мы подсчитываем выстрелы. 

Как видите, для создания компьютерной игры нам потребовались 
всего несколько небольших сценариев. Попробуйте создать собствен¬ 
ную игру или усовершенствовать данную. Например, не трудно сде¬ 
лать гак, чтобы после каждого выстрела корабли перемещались по 


полю. 




Глава 7 


Обмен данными 
и сохранение 
информации на диске 


В главе 2 мы познакомились с дескрипторами для создания форм 
и связанных с ними элементов управления. Чаще всего в предыду¬ 
щих листингах мы использовали кнопки формы как средство вызова 
пользовательских функций, созданных в сценариях ѴѴеЪ-страницы, 
и управления ими. Но основное назначение форм состоит в поддер¬ 
жании диалога между разработчиком и посетителями \ѴсЬ-страницы. 
Можно наладить непосредственный контакт с пользователями, при 
котором информация, введенная в поля формы, передается разработ¬ 
чику по электронной почте. Чаще под диалогом подразумевается вза¬ 
имодействие посетителя с \ѴеЬ-сервером, когда записи в полях фор¬ 
мы сохраняются в базе данных или обрабатываются специальными 
программами для формирования запроса к базе данных и возвраще¬ 
ния пользователю запрошенной информации 

В любом случае диалог предполагает обмен данными. В этой главе 
мы рассмотрим принципы организации обмена данными с помощью 
сценариев ^ѵа$сгірІ и элементов управления форм. Будут рассмо¬ 
трены примеры обмена данными как между удаленными компьюте¬ 
рами, так и на уровне компьютера клиента между окнами обозрева¬ 
теля и файловой системой машины. 

Выбор и передача данных с помощью 
элементов управления формы 

Элементы управления, с помощью которых можно вводить дан¬ 
ные или выбирать предустановленные значения, называются поля¬ 
ми формы. К полям формы относятся элементы управления следу¬ 
ющих типов: 
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♦ текстовое поле ввода; 

♦ поле редактора; 

♦ флажок: 

♦ переключатель; 

♦ список; 

♦ раскрывающийся список. 

Общим для всех полей является то, что они моіут хранить данные, 
вводимые или изменяемые пользователями. С помощью методов фор- 
мы, о чем вы узнаете далее в этой главе, можно автоматически извлечь 
данные из всех полей и передать их на сервер для программной обра¬ 
ботки или направить в виде текста по адресу электронной почты. 

Поле ввода и поле редактора 

Поля ввода мы уже довольно часто использовали в листингах пре¬ 
дыдущих глав. Такое поле создается с помощью дескриптора < ІКРІЛ' 
ТУРЕ="ТехС" ѴАЬМЕ~" строка текста" > и может содержать строку 
неформатированного текста, которая либо задается по умолчанию 
с помощью атрибута /АШЕ, либо автоматически присваивается этому 
атрибуту при вводе текста пользователем 

Если необходимо предоставить пользователю возможность вво¬ 
дить многострочный текст, воспользуйтесь таким элементом управле¬ 
ния, как поле редактора. Для создания этого элемента формы приме¬ 
няется специальный парный дескриптор <ТЕХТАР.ЕА ....</ТЕХТАКЕ А- . 
Для поля редактора устанавливаются следующие атрибуты 

♦ МАМЕ и Н> — идентификация элемента на \ѴеЪ-странице; 

♦ ѴАШЕ — содержимое поля представленное текстом, заключен 
ным между дескрипторами «-ТЕХТАКЕА> </ТЕХТАНЕА»; 

♦ СОЬЗ — ширина поля в окне обозревателя в текстовых сим¬ 
волах; 

♦ ВОИН высота поля в строках. 

Линейные размеры поля редактора в окне обозревать 
ля, задаваемые с помощью атрибутов коиз и соьз, не 
ограничивают число символов и строк, вводимых поль¬ 
зователем с клавиатуры Если строка содержит больше 
символов, чем указано в атрибуте соьз, то текст авто- 
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матически будет перенесен на следующую строку. Если 
число строк превысит значение К0М5, появится полоса 
прокрутки. К тексту поля редактора можно обратиться 
как с помощью атрибута ѴАШЕ, так и с помощью свой¬ 
ства іппегТехС. 



Пример использования поля редактора показан в ли¬ 
стинге 7.1. 


Листинг 7.1. Поле редактора 

<ЮКМ ЫАМЕ^-Еоппі" ІБ- " Еогті " > 

сТЕХТАКЕА ЫАМЕ="Ьа1" ІІ)="Ьа1" СОЬ8=50 КОИ8=5> 

Варкалось. Хливкие шорьки 
Пырялись по наве. 

И хрюкотали зелюки 
Как мюмзики в мове. 

( Льюис Кэрролл)</ТЕХТАКЕА> 

</РОКМ> 

<8СКІРТ> 

йосшпепі.шгіСе{"Атрибуты текстового поля:<ВК>"); 
боситепт .мгібе{ "Тип элемента формы: " + йосшпепс .Еогті.Таі. 
Туре + *<ВК>"); 

йосшпепі .шгіТе ("ТЪе ѵаіие оЕ СЪіб ііеій із: " + йоситепТ. 
ЕогтІ.ЬаІ.СОІЗ + "<ВК>"); 

йосшпепТ .мгібе("ТПе ѵаіие оі ТЪіз біеій із: " + йосишепТ. 

Еогші.Таі.гомз + "<ВН><ЕК>■); 
йоситепТ „шгісе("Содержимое текстового поля<ВЕ>“); 
йоситепс .шгііе( "ТЬе ѵаіие оі сМз ііеій із: " + 

йосишепТ . Еогѣй. Таі. іппегТехТ + "<ВВхВК>"); 
йосишепТ .мгіТе( "Вывод текста построчно:<ВК>"); 

ТехТ_з1:гіпдз = йоситепТ.іогпй.СаІ.ѵаіие.зріІС("\п"); 
іог {і=0; і<Ьехб_зІ:гіпдз .ІепдТЬ; і++) 

Йосишепт . мгібе {ТехТ_зі:гіпдз [ і ] +" <ВВ>") ; 

</5СКІРТ> 


В этом листинге мы создаем форму с полем редактора, а затем ана¬ 
лизируем атрибуты поля и выводим их значения на экран с помощью 
метода йосишепт .мгісе. Полученное поле редактора и результат вы¬ 
полнения сценария показаны на рис. 7.1. 
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Рис. 7.1. Поле редактора и значения его атрибутов 


Вы помните, что обозреватели игнорируют все символы абзацев 
и табуляции в тексте ШеЬ-страницы, если они не заданы соответству¬ 
ющими дескрипторами. Но поле редактора чувствительно к этим 
служебным символам и воспроизводит их так, как они были введены 
в исходном тексте между дескрипторами <ТЕХТАКЕА>...</ТЕХТАЕЕА> 
(см. рис. 7.1). Далее программа сценария выводит на экран тип данно¬ 
го элемента управления (свойство Суре) и значения атрибутов СОЬЗ 
и ЕОИЗ. Этот же синтаксис обращения к атрибутам поля редактора 
можно использовать в коде сценариев для динамического изменения 
внешнего вида поля на \ѴеЪ-етранице. 

Затем с помощью метода йосшпепС .мгіее мы выводим на экран 
содержимое ноля. Обратите внимание, что теперь обозреватель иг¬ 
норирует служебные символы и выводит текст одной строкой без 
абзацев и табуляции (см. рис. 7.1). Чтобы вывес ти текст построчно, 
вам следует узнать о кодировании служебных непечатных символов 
в тексте: 

♦ "\п" символ абзаца; 

♦ "\С" — символ табуляции. 
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Теперь, воспользовавшись методом зрііі (см. главу 4), мы можем 
преобразовать текст поля редактора в массив, значениями которого 
будут отдельные строки текста. Затем выводим элементы массива на 
экран с помощью цикла ігог: 

СехС_зСгіпдз = йосцрепС.ЕогіпІ.саІ.ѵаІие.БрІіССХп"} ; 

{ог { і=0; і<СехС_зі:гіпдз. ІепдСЬ; і++) 
йосшпепС .шгісе (Сех1:_БЬгіпдБ [і] + "<ВН>") ; 

А "\ Служебные символы можно использовать при вводе 

(На заметку] текста в поле редактора с помощью сценария. Напри- 
V V мер, текст, приведенный на рис. 7.1, можно ввести сле- 

0 0 дующим образом: 

йоситепЬ.ЕогтІ.СаІ.ѵаІие = "Варкалось. Хливкие 
шорьки\пПырялись по наве.\пИ хрюкотали зелюки\ 
пКак мюмзики в мове. \п\Ъ (Льюис Кэрролл)" 



Поле редактора не поддерживает использование де¬ 
скрипторов для форматирования текста или создания 
в поле каких-либо элементов ѴѴеЬ- страницы. Все вве¬ 
денные дескрипторы будут показаны как обычный текст. 


Выбор параметров с помощью переключателей 
и списков 

В главе 2 вы узнали, как создавать в форме флажки и переключате¬ 
ли с помощью дескрипторов сШРЧТ ТУРЕ - 1 сЬескЬох ’ ЕАМЕ - - 1 имя' > 
и сЮТОТ ТУРЕ= 1 гайіо ' ЮАМЕ- 1 имя' > соответственно. Как вы пом¬ 
ните, у каждого флажка может быть уникальное имя. но можно соз¬ 
дать и группу флажков под одним именем. Переключатели всегда об¬ 
разуют группу, в которой выбранным может быть только один пере¬ 
ключатель. Выбор другого переключателя в группе автоматически 
сбрасывает предыдущий выбор. В группе же флажков возможна лю¬ 
бая комбинация выбранных и сброшенных элементов группы. 

Данные элементы управления формы дают возможность пользо¬ 
вателям сделать свой выбор между двумя (индивидуальный флажок) 
или несколькими независимыми (группа флажков) или альтерна¬ 
тивными (группа переключателей) значениями. Теперь нам нужно 
научиться анализировать значения флажков и переключателей с по¬ 
мощью сценариев. 
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Обращение к флажкам и переключателям 

С индивидуальными флажками все очень просто К такому флаж¬ 
ку можно обратиться по имени следующим образом 

йоситепс. имя__формы. имя_флажка. атрибут 


Но элементы группы не имеют индивидуальных имен, а группа 
сама по себе не содержит никаких атрибутов. Как же решить эту про¬ 
блему? Секрет состоит в том, что обозреватель автоматически создает 
массив под именем группы переключателей или флажков. Все эле¬ 
менты группы добавляются в этот массив в порядке их определения 
в коде НТМЬ. 

Пример ) Так, в листинге 7.2 в форме Гогті создаются два мас¬ 
сива — соіог, содержащий в себе четыре объекта пере¬ 
ключателей, и Сгиіе с тремя объектами флажков. 



Листинг 7.2. Создание в форме группы переключателей 
и группы флажков 


<РОКМ ЫАМЕ- * іоггпі ' Ю= ' іогті ' > 

<!- Группа переключателей —> 

<ВКхШЩТ ТУРЕ= * гайіо ' МАМЕ=' соіог 1 СНЕСКЕБ>Белый 
<ВКхШРОТ ТУРЕ=' гайіо ' №ШЕ= 1 соіог 1 >Красный 
<ВКхШР1)Т ТУРЕ=‘ гайіо 1 МАМЕ- 1 соіог 1 >Желтый 
<ВКхШРЦТ ТУРЕ=' гайіо ' ЫАМЕ^' соіог 1 >Зеленый<ВК> 


<!- Группа флажков —> 

<ВКхІНРІГГ ТУРЕ= * сЬескЪох 1 КАМЕ = 1 СгиіТ * >Груша 
<ВКхІЫРі;т ТУРЕ-' сііескЪох 1 ЫАМЕ= ' ігиіГ 1 >Персик 
<ВКхШРІІТ ТУРЕ=' сЬескЬох ’ МАМЕ= 1 Егиіт ' >Яблоко<ВЕ> 

</РОНМ> 

Теперь мы можем обратиться к любому флажку или переключате¬ 
лю следующим образом: 

йосшпепс. іогпй . соіог [1] // соответствует переключателю 

// "Красный" 

йосшпепС. Гогші . ЕгиіС [0] // соответствует флажку * Груша" 

АтрибутСНЕСКЕй 

Флажки и переключатели имеют атрибут СНЕСКЕБ, который 
может принимать значение Ьгие или Іаізе и указывает, является 
данный элемент выбранным или сброшенным. По умолчанию этот 
атрибут принимает значение ' а 1 зе, т.е. все флажки и переключатели 
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по умолчанию сброшены. Чтобы сделать 
какой-либо из этих элементов установлен¬ 
ным сразу при открытии окна, укажите 
атрибут СНЕСКЕО в списке атрибутов де¬ 
скриптора <ШРЦТ>. Например, в листин¬ 
ге 7.2 но умолчанию мы устанавливаем 
переключатель Белый, как показано на 
рис. 7.2. 

Анализируя значения атрибута СНЕСКЕО 
с помощью функции сценария, мы можем 
теперь определить, какие флажки и пере¬ 
ключатели были выбраны пользователем. 
Давайте изменим код листинга 7.2 и до¬ 
бавим на \ѴеЪ-страницу кнопку Показать 
выбранные элементы и функцию зЬом_зе- 
ІесЕіоп для обработки события СЖСЕІСК. 
Код сценария показан в листинге 7.3. 




«I ІІ 4Ф 

рЩ* $3 ! * *■' - 

- -Умліѵл* . - .7Г". 


С: і'ря'жиЪ 

^.іГиеа* 

О ЗСжж» 


I _ I 

Рис. 7.2. Группы переключа¬ 
телей и флажков в окне обо¬ 
зревателя 


Листинг 7.3. Определение флажков и переключателей, 
выбранных пользователем 


<нтмь> 


<НЕАБ> 

<5СКІРТ> 

ѵаг соіогв = пей Аггау("Белый","Красный","Желтый","Зеленый") ; 
ѵаг СгиіСз = пем Аггау("Груша","Персик","Яблоко"); 

ЕипсГіоп 5Ікж_8е1есІ;іоп( ) { 

Хог (і=0;і<йоситепС.і:огт1.со1ог.1епді:1ігі++) { 
іі: (йоситепс.іогтІ.соІогЦ] .сЪескей) 

8е1есСей_гайіо. іппегТехГ = соіогз [іі +";"; 

} 

ае1есСей_^ Іадз. іппегТехС ~ "" ; 
іог (3=0; і<йоситепр.і:огт1,Хгиіі:.1епдеЬ; і + + ) { 
іі (йоситепі:.іогті.ігиіе[з}.сЬескей) 

8е1есГей_і:1адБ.іппегТехі: += {ГгиіСз[Л + "; "); 

} 

} 

</5СКІРТ> 

</КЕАО> 

<ВООУ> 

<ГОКМ ЫАМЕ= 1 Гогті' И^'ЕогтІ^ 
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... код сценария листинга 7.2 
<1- Кнопка --> 

<ВКхІЫРЦТ ТУРЕ= ’Ъиббоп ' ѴАШЕ= “Показать выбранные 
элементы" ОМСЫСК=" зЬом_5е1есбіоп ()*> 

</РОКМ> 

<НЗ>"Выбран переключатель:"</НЗ> 

<Р МАМЕ^БвІесСесЦгабіо" ІБ="зе1есбесЗ_га<Зіо"х/Р> 

<НЗ >"Выбраны флажки:"</НЗ > 

<Р ЫАМЕ="Бе1есбесЗ_б1адБ" ІБ="зе1есбей_І:1адБ"х/Р> 

< /ВОБѴх /НТМЬ> 

В сценарии создаются два массива с литеральными константа¬ 
ми, соответствующими подписям переключателей и флажков. Затем 
следует код функции 5Іюм_Бе1есбіоп. В функции выполняются два 
цикла по массиву переключателей и массиву флажков. С помощью 
оператора іб проверяются значения атрибутов СНЕСКЕБ у каждого 
элемента массива, и если значение бгие, на страницу выводится со¬ 
ответствующий элемент массива соіогб или бгиібз. Результат вы 
нолнения программы показан на рис. 7.3. 





і Ікдиі 

; ч. Кдоли уіЛ 
1*' 

ОЗмйвіЭІ 

к *■*»■*» 

шуп.'.штіси 

"Нѣю)імл>і фд«жга:" 

Гдоии. ЯРгхлг', 

Рис. 7.3. Программа определяет пере¬ 
ключатели и флажки, выбранные пользо¬ 


вателями 
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Работа со списками формы 

Списки в форме создаются с помощью парных дескрипторов 

<8ЕЬЕСТ>...< /ЗЕЬЕСТ> и вложенных дескрипторов <ОРТІ(Ж>...</ОРТІ0Н> 
(см. также главу 3). Например: 

<8ЕЬЕСТ МАМЕ="іогт1"> 

<ОРТІ(Ж ѴАШЕ=0>Газета . Еи< /0РТІ0И> 
сОРТІСМ ѴАШЕ= 1>Утро. Ки</ОРТІО№> 
сОРТІОЫ ѴАШЕ=2 >Комсомольская правда</ОРТІОЫ> 
сОРТІСЖ ѴАШЕ=3>Экспресс газета</0РТІ(Ж> 

<ОРТIОN ѴАШЕ=4>Наша газета</0РТІ0Ы> 

<0РТ10И ѴАШЕ=5>Футбол Хоккей</ОРТІОЕ> 

</2ЕЕЕСТ> 

Пункты списка автоматически добавляются в массив с именем 
списка. В списке отображается текст, заключенный между дескрипто- 
рами <ОРТІОЫ>...</ОРТІ(Ж>. Этот же текст автоматически присваива¬ 
ется атрибуту списка ТЕХТ. 

В формах используются списки двух типов: с исключительным 
и множественным выделением элементов списка. В первом случае 
в списке можно выбрать только один пункт. Выбор другого пункта от¬ 
меняет выбор предыдущего. В списках с множественным выделением 
можно выбрать произвольный набор списков. Тип списка задается 
атрибутом МІЯ/ТІ РЕЕ в теле дескриптора <8ЕЬЕСТ>. Анализ и обработ¬ 
ка данных списков производится по-разному, в зависимости от типа 
списка. 

Списки с исключительным выбором пунктов 

Если в списке разрешен выбор только одного пункта, индекс вы¬ 
бранного элемента заносится в свойство зеіесііесііпсіех. 

Обратите внимание на то, что свойству зеІесСесЗіпбех 
присваивается индекс пункта в массиве, а не значение 
атрибута ѵаепе и не текст пункта, показанный в списке. 

Таким образом, в сценарии можно проверить, какой пункт списка 
выбран в данный момент, и выполнить действие, соответствующие 
выбранному пункту, используя для этого конструкцию с оператором 
зш Ьсіі (см. главу 5). Другое решение состоит в выборе параметра или 
функции из массива, содержащего столько же элементов, сколько 
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пунктов в списке. Давайте создадим список гиперссылок. Идея состо¬ 
ит в том, чтобы дать пользователям возможность выбрать из списка 
ресурс Интернет и перейти к нему щелчком на кнопке, как показано 
на рис. 7.4. 












ПИ^! 






,,.:,се« 



Рис. 7.4. Переход на ХѴеЬ-страницу. выбранную 
из списка 


НТМЬ-код \ѴеЬ-страницы приведен в листинге 7.4. 

Листинг 7.4. Выбор гиперссылки из списка 

<нтмь> 

<НЕАБ> 

<5СНІРТ> 

Ііпке = пем АггауО; 

1іпкз[0] - "Ь.ССр: //иѵм.дагеСа.ги/" ; 

1іпкз[1] = "ЬЬСр: //мѵт.иСго.ги/ "; 

1іпкз[2] ~ "ЬСЬр://шм.кр.ги/"? 

1іпкб[3] = "МХр://ммм.ед.ги/"; 

1іпкз[4] = "ЬСТр: //пд.аргезв.ги/"; 

1іпкз[5] = "ЬСТр://мѵш.Ьоскеупек8''Оп1іпе.сош/"; 


ГипсТіоп геІосаСеО { 

сЬоісе = йосишепЬ.іогті.ІіпкІівР.зеІесСесЗіікЗех; 
кіпбом.іосатіоп = Ііпке[сЬоісе]; 

} 

</БСЕІРТ> 

</НЕАР> 

<ВСЮУ> 

<ГОКМ КАМЕ="іогкі1"> 

<ЗЕЬЕСТ ЫАМЕ- " 1 іпкі ізС " > 

<ОРТІОМ ѴАШЕ=0>Газета. Ки</ОРТІОМ> 

<ОРТІШ УАЫШ=1>Утро . Ки< /ОРТІО№> 
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сОРТІСЖ ѴАШЕ=2>Комсомсшьская правдас/ОРТІОѢЬ 
сОРТІОМ ѴАЬ0Е=3>Экспресс газета</0РТІ0Ы> 
сОРТІСЖ ѴАЫШ=4>Наша газета</0РТІ0Ы> 
сОРТІОМ ѴАШЕ=5 > Футбол Хоккей</ОРТКЖ> 

</$ЕЬЕСТ> 

<ЩРІ)Т ТѴРЕ-"ЬиЫ:оп" ѴАШЕ=" Перейти по ссылке" 

ОЫСЫСК=" геіосасе () "> 

</РОКМ> 

</ВОБУ> 

</нтмь> 

Чтобы выполнить переход, ІІКЬ-адрес просто присваивается 
свойству Іосасіоп объекта міпсіом. В окне обозревателя автомати¬ 
чески отобразится \ѴеЬ-страница по заданному адресу. Список !ШС 
адресов хранится в массиве Ііпкз, причем элементы этого массива 
соответствуют названиям \ѴеЬ-узлов в списке. Поэтому индекс вы¬ 
бранного пункта списка используется в качестве индекса массива 
ИКЬ-адресов. 


Списки со множественным выбором пунктов 

В списке с ус гановленным атрибутом мцт.ТІРЬЕ можно выбрать 
несколько произвольных пунктов Для этого нужно щелкнуть по по¬ 
рядку на всех пунктах которые вас интересуют, удерживая нажатой 
клавишу -Сіг1>. Если отпустить клавишу, то список будет работать 
в обычном режиме с исключительным выбором пунктов г.е щелчок 
на пункте списка без нажатия клавиши <СЫ> сбросит все ранее вы¬ 
бранные пункты списка. 



Для анализа списков со множесаенным выделением 
нельзя использовать свойство зеіесЬей пйех, так как 
в эту переменную заносится индекс только первого пун¬ 
кта, выбранного в списке. 


Объекты пунктов списка, заданные дескрипторами <ОРТІСЖ>... 
</0РТІ0М>, содержат атрибут 8ЕІ ЕСТЕВ, который работает точно так 
же, как и уже знакомый вам атрибут СНЕСКЕВ в объектах флажков и 
переключателей (см. предыдущий раздел), т.е. данный атрибут при¬ 
нимает значения Ггие и {а 1о в зависимости от того, выбран этот 
пункт списка или нет. Атрибут ЗЕЬЕСТЕБ может быть установлен 
в НТМЬ-коде списка. В этом случае данный пункт будет выбран на 
\ѴеЬ-странице по умолчанию. 
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Если в коде списка с исключительным выбором пуі, 
ктов вы ус т ановитр атрибуты ЯЕЬЕСТЕР в нескольких 
дескрипторах <ОРТІОМ>, то выбранным по умолчанию 
будет только по ледний установленный пункт. 


Теперь все ясно. Если в объектах пунктов списка есть атрибут 
ЗЕЬЕСТЕБ, а сами объекты являются ч ленами массива с именем списка, 
то в сценарии мы можем определить выбранные массивы с помощью 
цикла Еог, также как мы делали это для анализа групп 
Пример ) Ф'іажков. 

Пример использования списка со множественным 
выделением показан в листинге 7.5 и на рис. 7.5. 



Листинг 7.5. Использование списка со множественным 
выделением 


<нтмь> 


<НЕАВ> 


<8СКІРТ> 

ІипсХіоп бЪ<ж_1ізХ() { 
боситепХ. . Хогті .зеіесііоп. ѵаіие = 
ііог (і=0;і<йосигаепС. Еогті. Х1ід1Н:5.1епдРІі;і + + ) { 
ІХ <<ЗоситепХ.Хогт1.Х11дШ:5[1] .зеІесХесЗ) 
боситепС .Хогті.зеіесііоп.ѵаіие += 
(йосишепХ.ХогіпІ.ЕІідЪСзГі] .ХехЬ + + 

«ЗоситепХ.Еогті.XIідЪбзІі] .ѵаіие + "\п"); 

} 

} 

</$СКІРТ> 

</НЕАБ> 

<ВСЮУ> 


<Н2 >Авиарейсы</Н2 > 

<Е0КМ ЫАМЕ="1огш1"> 

<РхБЕЬЕСТ ЫАМЕ="11ідЫз" ШЬТІРЬЕ> 

<ОРТІОЫ УАИЗЕ^Тейс 8А0316, 8:05">Москва 
</0РТІСЖ> 

<0РТІ(Ж ѴАИЗЕ="Рейс 5А2505, 8 : 37">Москва 
</0РТІ0М> 

<0РТI0N ѴАЫІЕ* * Рейс 5А0180, 8:55">Москва 
Санкт-Петербурге /0РТІ(Ж> 
<0РТІ0Ы ѴАШЕ^" Рейс 8А5513, 9:12">Москва 
</0РТІ(Ж> 


-> Киев 
-> Ереван 

-> 

-> Варшава 
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сОРТКДО ѴАШЕ^ ■ Рейс 8А3346, 9:33 ">Москва -> 

Санкт-Петербурга / О РТІ ОЫ > 

<ОРТІОМ ѴАШЕ= "Рейс 5А5513, ІО :00">Москва -> Киев 
</ОРТЮМ> 

</5ЕЬЕСТ> 

<ШРит ТУРЕ^ЬиЬЬоп" ѴАШЕ- "Показать выбранные" 
ОКСЫСК=“зЬом_1І5І: () "></РхР> 

сТЕХТАКЕА МАМЕ^* зеІесСіоп' Ю= 'зеІесСіоп' КОМБ=5 СОЬ8=50> 
</ТЕХТАКЕА> 

</РОКМ> 

</ВСЮУ> 

</НТМЬ> 




Й ікѵ ■•І^ .ІЧГ Ч фнѵ» 

3 ^ ^ СЬ , «л**** 4?: 

Ь“ *»»♦*** л;-*** т *, ■ 

\ВИЙ|І«(ІСЫ 

-•.? _"-»*»■_ * 

Ш ав шШ& т Дй8]І Ѵ ^ } 

ЛоЛ*** -> ' ****■-'&■**}■«■?%* *•>** *М***С, «І* 

'^«п -> С*«»-Зі«»*ѵ».'. Іе*г ѴііЗ 


Рис. 7.5. Выберите рейі ы ш списка и посмотри 
те детальную информацию в поле редактора 

Обратите внимание: добавление аірибута мчьгірье не 
только позволило выбирать несколько пунктов списка 
одновременно, но и изменило внешний вид списка. 
Список расширился для отооражения четырех пунктов, 
тогда как список с исключительным выбором пунктов 
по умолчанию был раскрывающимся с полем в одну 
строку (см. рис. 7 4). Вы можете изменить размер окна 
списка с помощью атрибута БІ 2 Е, в котором нужно ука 
зать число строк отображаемых в списке. Например, 
5І2Е=1 задаст список размером в одну строку. 

Для того чтобы запустить функцию анализа списка, щелкните 
на кнопке Показать выбранные. Функция 5Іюи_ІІ5І; ( начала очищает 
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поле редактора, а затем выполняет цикл іог, в котором проверяют¬ 
ся атрибуты ЗЕЬЕСТЕб пунктов списка. Если пункт выбран, сонут 
ствѵющая информация выводится отдельной строкой в поле редак 
тора. Обратите внимание на то, как мы комбинируем в одной строке 
данные из атрибутов ТЕХТ и ѴАШЕ выбранного пункта списка, а за 
тем добавляем символ абзаца “ \п". 

Иногда бывает необходимо дать возможность поль¬ 
зователю сбросить все пункты списка Оперируя только 
списком, сделать это невозможно поскольку для того 
чтобы сбросить секущий пункт, надо выбрать другой. 
Вам нужно будет добавить в форму дополнительную 
кнопку Очистить, которая запустит следующий цикл: 
Гог(і 0;і--размгр_списка;і + + ) 

йосшгэнс ,имя_формы.имя_списка[і] .БеІесСетЗ - 0; 
Можно также добавить кнопку Выделить все, в функции 
которой нужно выполнить такой же цикл, но атрибуту 
зеьестер присвоить значение с. Попробуйте самосто 
ятельно написать программу для кнопки Инвертировать 
список, которая сбросит все выделенные пункты и выбе¬ 
рет те, которые не были выделены в исходном списке. 



Передача данных формы 

Основное назначение форм состоит в сборе информации от поль¬ 
зователей и передачи этих данных на сервер разработчика ѴѴеЬ -стра¬ 
ницы. Типичный пример использования форм - регистрация пользо¬ 
вателей \УеЬ-узла. Посетителю при первом обращении к ѴѴеЪ-страни- 
це предлагается ввести в поля формы информацию о себе: фамилию, 
имя и отчество, год рождения, пол, род занятий. В форме могут быть 
представлены списки телеконференций, групп по интересам и про¬ 
чих неформальных объединений, в которых посетитель может при¬ 
нять участие (или подписаться на них), выбрав соответствующий 
пункт списка, переключатель или флажок. Регистрация посетителей 
полезна как самим пользователям, поскольку позволяет им выбрать 
наиболее приемлемую конфигурацию предоставления услуг, так 
и разработчикам, так как дает возможность оценить качественный и 
количественный состав потенциальных клиентов. Такая оценка по¬ 
может спланировать дальнейшее развитие и продвижение \ѴеЪ-узла 
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для достижения максимальной эффективности и популярности сре¬ 
ди пользователей. 

* После того как форма будет заполнена, информацию нужно пере¬ 
дать на сервер для обработки, регистрации и сохранения в базе дан¬ 
ных. Обычно на сервере для этого используются специальные про¬ 
граммы. написание которых выходит далеко за рамки этой книги. 
Кроме того, программирование обработки данных форм на сервере 
требует знания технических характеристик и программного обеспе¬ 
чения самого сервера. Обратитесь за помощью к своему системному 
администратору. 

В этом разделе мы рассмотрим лишь наиболее общие принци¬ 
пы управления передачей данных с формы на сервер. Но прежде 
чем передать данные, нужно проверить содержимое полей формы. 
Пользователь мог забыть заполнить какое-нибудь важное поле, либо 
ввести данные не в том формате. В следующем подразделе мы позна¬ 
комимся с методами проверки значений в полях формы. 

Проверка полей формы 

С помощью сценариев можно выполнять проверку правильности 
заполнения полей формы, по мере того как пользователь вводит текст 
с клавиатуры. Для этого используется событие ОМСКАМОЕ, которое 
активизируется каждый раз, когда пользователь покидает элемент 
управления, в поле которого были внесены изменения Для проверки 
содержимого поля используется встроенная функция Севе () в соче¬ 
тании с переменной особого типа, содержащей список символов, при 
менение которых недопустимо. Синтаксис проверки содержимого 
поля показан в следующем примере: 

<ШРОТ ТѴРЕ^ЬехС' ЫАМЕ='ііг5(;_паше' ВІМЕ'ЗО' ОМСНАЖЗЕ= "ѵаг 
раССегп=/ ІЕ (растет. Тезе (СЬі а. ѵаіие) ) 
аіегі: ('Проверите данные в поле Имя');"> Имя 

Обратите внимание на то. что событию оріснмісе назна¬ 
чен сценарии состоящий из нескольких команд, разде¬ 
ленных символами точки с запятой. Ранее в подобных 
случаях вы определяли отдельную функцию и присваи¬ 
вали ее событию Эти способе взаимозаменяема 

В сценарии определяется переменная рассеіп особого типа. Имя 
переменной может быть другим, но важно соблюсти правильный син¬ 
таксис присвоения значения этой переменной. 
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ѵаг имч_переменной = /[список запрещенных символов]/ 

В спис ке можно укалывать диапазон символов: 

♦ '0-9' или '\й‘ — все цифры; 

♦ 1 а-я' все строчные буквы кириллицы; 

♦ ' А-Я ' все прописные буквы кириллицы; 

♦ ' А-я' все буквы кириллицы; 

♦ ' а-г ' — все строчные латинские буквы (первая буква — латин¬ 
ская «а»); 

♦ ' А-2 ’ все прописные латинские буквы (первая буква — ла¬ 
тинская «А»): 

♦ ' А-г 1 — все буквы латинского алфавита (первая буква — ла¬ 
тинская «А»); 

♦ * А-я ' — все буквы (первая буква — латинская «А»); 

♦ ’ \м' - все буквы, цифры и символ подчеркивания «_»; 

♦ ‘Хе 1 символы пробела, табуляции и абзаца. 

Далее в сценарии используется конструкция с оператором іі:. 
Если условие оператора і і выполняется (в данном случае функция 
Севе обнаруживает в значении текущего элемента управления іЬіз. 
ѵаіие символы, представленные в переменной расьегп), выполняет¬ 
ся команда, следующая за оператором і I [условие). В данном при¬ 
мере используется функция аіегь, которая покажет на экране окно 
сообщения с предупреждением о том, что в поле введено неверное 
значение (рис. 7.6). 



Рис. 7.6. В текстовое поле Имя были вве¬ 
дены недопустимые символы 
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В примере выше в переменной раььегп мы указали ди¬ 
апазоны символов, которые не должны использоваться 
в поле. Можно поступить наоборот указать диапазон 
допу тимых символов. Например, в следующем при¬ 
мере указывается, что в поле допустимо использовать 
только прописные и строчные буквы кириллического 
алфавита 

(ЖСНАМСЕ= "ѵаг раСЬегп= / [' А-я' ] /; ІЕ( ІраССегп.ЬеЕТ 
(ЬЬів.ѵаІие) ) аІегМ 'Проверьте данные в попе');" 

Обратите внимание на восклицательный знак перед 
функцией раіл егг. . іеві Зто леи ический оператор от 
рицания, который изменяет значение возвращенное 
функцией ; ееь, на противоположное, т е. окно с пред¬ 
упреждением будет показано в том случае, если вве 
денные символы не будут принадлежать диапазону 
заданному в переменной растет. 

Передача данных на сервер 

Для передачи данных на сервер используется метод формы 
зиЪтіІ: {). Метод можно вызвать непосредственно в коде сцена¬ 
рия: имя_формы. зиЬтіі: (). но чаще данные передаются с помощью 
специальной кнопки Подача запроса. Эта кнопка создается следу¬ 
ющим образом: 

<ШРОТ ТУРЕ=’ зиЪтіІ: ' > 

Щелчок на кнопке Подача запроса автоматически вызывает для 
формы метод виЬшіі; (). Адрес, по которому передаются данные, и 
способ передачи устанавливаются в атрибутах дескриптора <РОКМ>. 

♦ АСТІСЖ — строка адреса передачи данных: 

• ІШІы-адрес \ѴеЬ-сервера и имя файла программы обра¬ 
ботки данных; 

• адрес электронной почты в формате " шаіІЬо : адрес_ 
элек тронной_по чты". 

♦ метнсю метод передачи дет или рози; отличаются форматом 
передачи данных и именем стандартной переменной среды 
\ѴеЪ-еервера, которой будет присвоена строка "имя_поля=зна¬ 
чение,...". 

В формах используется еще одна полезная специальная кнопка — 
Сброс. Кнопка создается следующим образом: 
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сШРОТ ТУРЕ= ' гезеС * > 

Кнопка Сброс вызывает для формы метод гезеС {), который вос¬ 
станавливает поля формы в том виде, в каком они были установле¬ 
ны по умолчанию. 

А Кнопки типов зиЪтіІ: и гезес имеют такой же набор 

(На Заметку] атрибутов и событий, как и обычные кнопки. Можно 
у У заменить стандартные подписи кнопок Подача запроса 

О и Сброс на другие, присвоив текст подписи атрибутам 
ѴАЬОЕ. Примите к сведению, что стандартные подписи 
кнопок выводятся операционной системой польэова 
теля, т.е. на компьютере с англоязычным интерфейсом 
ѴѴіпс1о\л/5 будут выведены надписи ЗиЬтіі и Реве*. а на 
ѴѴіпсіоѵѵб с китайским языком эти кнопки будут подпи 
саны по-китайски. В результате назначение этих важных 
кнопок будет понятным любому пользователю. Если же 
вы зададите альтернативные подписи, они останутся 
такими на компьютерах всех пользователей. 



Иногда бывает необходимо выполнить сценарий во 
время передачи данных. Если вы присвоите выполне 
ние сценария событию ОЖЛЛСК кнопки зиЪтіс или ге- 
зее, они перестанут выполнять свои непосредственные 
функции. Воспользуйтесь для решения этой проблемы 
событиями формы (Ж8ШМІТ и 0ШЕ8ЕТ. Впрочем, пере 


дачу данных формы можно организовать из любого 


сценария, добавив в конце функции обработки собы 


тия строку 


боситепТ. имя_формы. зиЪгпіе () 



Пример формы с кнопками Подача запроса и Сброс 
приведен ниже. 

<ЕОКМ ЫАМЕ="^огш1" АСТІОЫ="таііео:тутаі1@таі1 . 
ги" МЕТНСШ="розе"> 

<іырцт тѵРЕ="еехс" мАМЕ="еехеі"> 


<ШР1ГГ ТУРЕ= 1 зиЪпііе 1 хЮТІЛ 1 ТУРЕ= ' гезеС * > 


</ЕОКМ> 


В данной форме установлена передача текста поля еехеі по адре¬ 
су тушаі 1@таі 1. г и методом розе. После щелчка на кнопке Подача за¬ 
проса обозреватель покажет окно с предупреждением о небезопасной 
передаче данных (рис. 7.7). 
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Рис. 7.7. Подача запроса по адресу электронной почты 


Если щелкнуть на кнопке ОК, имя текстового ноля с его содержи¬ 
мым будет передано по адресу электронной почты, заданному в атри¬ 
буте АСТІОМ формы. Впрочем, дойдет ли сообщение по указанному 
адресу, следует выяснить у администратора сервера электронной по¬ 
чты, где зарегистрирован ваш почтовый ящик. 


Создание пользовательских 
диалоговых окон 

Ранее в главе 3 вы познакомились со стандартными диалоговыми 
окнами, открываемыми в сценариях Да ѵаЗсгірІ с помощью функций: 

♦ аіегс — окно сообщения с единственной кнопкой О К; 

♦ соп^іпп — окно с предложением подтвердить действие пользо¬ 
вателя с кнопками ОК и Отмена, 

♦ ргояарі: — окно ввода с текстовым полем и двумя кнопками, 

ОК и Отмена. 

Стандартные диалоговые окна предоставляют разработчикам до¬ 
вольно ограниченный выбор средств ведения диалога с посетителями 
\ѴеЪ-страниц. Но мы можем не ограничиваться стандартными диало¬ 
гами и разработать собственные. Пользовательские диалоговые окна 
представляют собой отдельные \ѴеЬ-страницы, обычно содержащие 
формы, которые открываются в особым образом сконфигурирован¬ 
ных окнах обозревателя, сохраняя при этом связь с окном основной 
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ѴѴеЬ-страницы. В этом разделе вы научитесь открывать и контроли¬ 
ровать дополнительные окна обозревателей. 

Открытие окон обозревателя 
с помощью метода ореп 

В главе 2 при изучении гиперссылок вы узнали, что документ 
НТМЬ по ссылке можно открыть в новом окне обозревателя, устано¬ 
вив в дескрипторе <А> ат рибут ТАКСЕТ -_Ыап к. Но это не единствен¬ 
ный способ открытия нового окна обозревателя. В ^ѵа8сгірІ в этих 
целях используется метод ореп объекта ѵ/ішіом. Синтаксис данного 
метода следующий: 

ѵаг имя_переменной = кіпбси .ореп{ ѴЯЬ, имя__окна, параметры); 

Метод возвращает объект нового окна, который можно присвоить 
переменной для управления окном в коде сценария. Все аргументы, 
передаваемые методу -ореп, необязательны. Команда міпбоілп ореп () 
откроет пустое окно обозревателя. В первом аргументе можно ука¬ 
зать КС-адрес существующей \ѴеЬ-страницы, которая отобразится 
в новом окне. Имя окна, заданное во втором аргументе, можно будет 
использовать в текущей ШеЬ-странице как значение атрибута ТАКСЕТ 
в гиперссылках. В результате щелчок на гиперссылке откроет доку¬ 
мент в этом окне. Третий аргумент содержит в себе список параметров 
конфигурации окна обозревателя. Используется следующий формат 
списка: " параметр1 -значение,параметр2=значение ,...". 

Обратите внимание: знак равенства между именем па 
Л Внимание^ Р амет Р а и значением не должен отделяться пробелами, 

/ / иначе это вызовет ошибку. 

°о 

Для настройки конфигурации окна обозревателя используются 
параметры, перечисленные в табл, 7.1. 

Таблица 7.1. Параметры конфигурации нового окна обозревателя 

Параметр Описание 

иібгъ Ширина окна в пикселях 

ЬеідЩ Высота окна в пикселях 

Остальные параметры принимают логические значения в формате 

УѲ8-ПО, или 1-0. 

гевігаЫе Если по или 0, то пользователь не может изменять размер 
открывшегося окна 
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Окончание табл 7.1 

Параметр Описание 

Іосасіоп Если чо или 0, то е окне не отображается поле Адрес 
тепиЬаі Если по или о, то в окне не отображается срока меню 
БсгоІІЬагЕ Если по или 0. то в окне не отображаются полосы прокрутки 
есаі ив Если по или 0, то в окне не отображает,.и строка состояния 
ЬооіЬаг Если по или 0, то в ок: . не отображается панель инструментов 

Если третий аргумент метода ореп пропущен, тс новое 
окно обозревателя выглядиі так же, как текущее окно 
Но если установлен хотя бы один параметр конфигура 
ции окна, всем остальным параметрам автоматически 
присваивается значение по, т е в окне не отображаются 
никакие строки и панели пользовательского интерфей¬ 
са, и размеры окна не могут быть изменены 

Ввод элементов ѴѴеЬ-страницы в новое окно 

Открыв пустое новое окно обозревателя, мы можем заполнить его 
содержимым с помощью метода югісе. Например, так вводится текст 
в новое окно: 

имя_окна. ѵ?гі Се("<Н2>Заголовок нового окна</Н2>"); 

Таким способом можно создать диалоговое окно с сообщением, 
сформированным с помощью сценария в исходной \ѴеЬ-етранице. 
Метод мгіЪе позволяет создавать с чистого листа довольно сложные 
документы НТМЦ содержащие не только текст, но и формы с эле¬ 
ментами управления. Удобство заполнения окна с помощью метода 
шгісе состоит в том, что содержимое окна может определяться уста¬ 
новками пользователя, сделанными в форме исходной ѴѴеЬ-страни- 
цы, перед тем как было открыто новое окно. 

Например, давайте создадим диалоговое окно выбо¬ 
ра файлов для выгрузки на удаленный сервер. Вы не 
знаете, сколько файлов собирается выгрузить поль- 
О зователь за один сеанс, поэтому хотите дать возмож¬ 
ность ему установить число полей в форме перед ее 
открытием. Для этого пользователь указывает число файлов в ноле 
исходной \УеЬ-страни ііы . Предположим, что за один сеанс можно 
выгружать от одного до девяти файлов, т.е. в поле нельзя вводить О, 
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число больше 9, буквы или оставлять поле незаполненным. В листин¬ 
ге 7.6 вам предлагается решение этой задачи. 

Листинг 7.6. Открытие диалогового окна, заполняемого 
из исходной ѴѴеЬ-страницы 

<нтмь> 

<НЕМ)> 

<5СРІРТ> 

СипсСіоп БЬом_(Зіа1од () { 

ир1оай_йіа1од = міпйом.ореп{"1іеідЬС=300,мійі:1і=400, 

зсго11Ъагз=уез"); 

ир1оай__йіа1од. йосшпепС .ѵлгіСе("<НЗ>Выберите файлы на диске</ 

Н3>"); 

ир1оай_йіа1од. йосютепС .кгі Се ("<Р0КМ 0Б51ІВМІТ= *ѵ/іпйом. 
сіозе{)' МЕТН0Б-*деС’ АСТІОИ^' ЬССр: //мѵм.щузегѵег. сот/ 
сді-Ьіп/деСіііІез.ру' ; 

{ог(і=0;і<досшгіепі:.Согіп8[0] . ^І1е_пііт.ѵа1ие; і++) 

ир1оай__йіа1од. йоситепс .нгісе ("сШРІІТ ТѴРЕ=' іііе' ><ВК>"}; 
ир1оай_йіа1од. йосшпепС .кгіСе (■<ШРШ’ ТУРЕ= * зиЬтіС ’ >■); 
ир1оай_біа1од.йоситепС.мгіСе("<ІЫРІ]Т ТУРЕ= ’ЬиССоп’ 

ѴАЫІЕ=* Отмена * 0ЫСІЛСК='міпйом.сіозе{)'></Г0КМ>"); 

} 

</$СКІРТ> 

</НЕАБ> 

<В0БУ> 

<Е0ЕМ> 

<Р> Открыть диалоговое окно для загрузки 
<ІЫРЙТ ТУРЕ=’СехС‘ ЫАМЕ= , Сі1е_пиш* 8І2Е='1' ѴАШЕ=5 
ОЫСНАЩЕ=*ѵаг раССегп=/['1-9']/; ІИІраССегп.СезС(СЬіз.ѵаІие) 
II Ийііз.ѵаіие II СЬіз.ѵа1ие.1епдСІі>1) аІегС('Введите в поле 
число от 1 до 9'); 
файлов</Р> 

<ШРІГГ ТУРЕ- ' ЬиССоп ' ѴАШЕ- "Открыть диалог " 0ЫСЫСК= " зЬоѵ/_ 
йіаІодО "> 

</Е0КМ> 

</В0БУ> 

</НТМБ> 

Внешний вид исходной \ѴеЪ-страницы и пользовательского диа¬ 
логового окна, создаваемого с помощью функции зЪом__йіа1од, по¬ 
казаны на рис. 7.8. 
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Рис. 7.8. Открытие диалогового окна выбора файлов 
для выгрузки на сервер 

Исходная \ѴеЬ-страница очень проста. Она содержит текст пред¬ 
ложения выгрузить файлы на сервер. Прямо в текст встроено не¬ 
большое поле, в котором указывается число выгружаемых файлов. 
Обратите внимание на строку проверки содержимого поля, присвоен¬ 
ную событию ОЫСНАЫСЕ: 

"ѵаг раЬЬегп=/1'1-9' ]/; ІИ іраССегп.СезМСІііз.ѵаІие) II 
Шііз.ѵаіие II СЬіз.ѵа1ие.1епд1:1і>1) аІегЬ('Введите в поле’ 
число от 1 до 9');* 

Диапазон допустимых значений от 1 до 9 задается в переменной 
раССегп, как мы делали это ранее в разделе « Проверка полей формы». 
Но в методе сезс мы выполняем более сложную проверку условий 
неверности значения поля. 

1. Значение не принадлежит диапазону переменной раСЬегп. 

2. Значение неопределенно (т.е. поле осталось незаполненным). 

3. Введено многозначное число. 

При выполнении любого из этих условий (поскольку они объеди¬ 
нены логическим оператором ИЛИ ~ I I ), будет выведено на экран 
окно предупреждения. 
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Щелчок на кнопке Открыть диалог запускает на выполнение функ¬ 
цию 5йом_біа1од, определенную в сценарии в разделе заголовка. Эта 
функция открывает новое окно обозревателя и присваивает его пере¬ 
менной ир1оай_йіа1од, после чего вводит в новое окно код НТМЬ 
формы с помощью метода ир1оас!_біа1од.доситепе .шгіГе (). Учти¬ 
те, что с помощью цикла Еог поле выбора файла добавляется в форму 
столько раз, сколько было определено пользователем в поле Еі1е_пили 

В форме используется элемент управления, который 
ранее мы не использовали: 

<ІЫРЦТ ТУРЕ=' Сііе' > 

Этот элемент управления представляет собой текстовое 
поле с кнопкой Обзор (см. рис. 7.8) Щелчок на кнопке 
открывает стандартное для операционной системы диа¬ 
логовое окно Выбор файла. При щелчке на кнопке От¬ 
крыть в окне Выбор файла путь к файлу будет помещен 
в поле элемента управления, как показано на рис. 7.8. 

За полями выбора файлов следуют две кнопки: Подача запроса и 
Отмена. Кнопка Отмена просто закрывает окно обозревателя, вызвав 
для этого метод міпдом.сіозе (). Кнопка Подача запроса выполняет 
передачу выбранных файлов на сервер по адресу, указанному в атри¬ 
буте АСТІОМ дескриптора сРОКМ>. При этом окно обозревателя тоже 
закрывается. Мы добились этого, назначив метод міпйом.сІозеО 
событию (ЖЗШМІТ в дескрипторе <РОКМ>. 

Модальные диалоговые окна 

Пользовательское диалоговое окно, созданное нами в листин¬ 
ге 7.6, имеет ряд недостатков. 

♦ С помощью метода шгіТе невозможно ввести сценарий, испол¬ 
няемый в новом окне. 

♦ Диалоговое окно существует независимо от окна исходного окна 
\ѴсЬ-страницы. Если щелкнуть на исходном окне, оно скроет от 
пользователя диалоговое окно, что может привести к ошибке. 

♦ Невозможно организовать обмен данными между новым окном 
и исходным окном. 

Эти проблемы можно решить в )аѵа8сгірі с помощью функции 
создания модальных диалоговых окон. 
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Модальными называются такие окна, которые откры 
ваются поверх исходного окна и не дают пользователю 
вернуться к исходному окну до тех пор, пока не будет за 
крыто модальное окно. Модальными были стандартные 
диалоговые окна ІаѵаБсгірІ. открываемые с помощью 
функций аіегщ соп€іпп и ргошрт.. Окно, открываемое с 
помощью метода міпбом.ореп, является немодальным. 


Создание пользовательского модального окна 

Для создания пользовательского модального окна в Даѵа^сгірі 
используется метод БЪомМосіаІОІаІод ( ШЬ, значение, параметры) 
объекта міпбом. 

♦ ІІНЬ — адрес ІЖЬ или путь на диске к файлу ѴѴеЪ-страницы, 
в котором записан НТМЬ-код диалогового окна. Это обяза¬ 
тельный аргумент. В модальном диалоговом окне может ото¬ 
бражаться только документ НТМЦ сохраненный в отдельном 
файле. 

♦ значение - любая переменная, передаваемая в диалоговое 
окно из основного документа. 

♦ параметры — список параметров диалогового окна. Для на¬ 
стройки конфигурации модального диалогового окна исполь¬ 
зуются почти те же параметры, перечисленные в табл. 7.1, что 
и для немодального окна, за исключением параметров размера 
окна. В данном случае параметры размеров окна выглядят так: 

• <Зіа1одМійіЬ ширина диалогового окна в колонках, 
например: "(Иа1одМісіС^1^25ет ,, ; 

• (ІіаІодНеідЫ: высота диалогового окна в рядах, на¬ 
пример: н (Зіа1одНеід1іС=25еш". 

еш — это особая полиграфическая единица измерения. 
Она соответствует площади, занимаемой буквой т. 


Ниже показан пример открытия модального диалогового окна: 

Біаіод = иіпсіом.зЬомМойаІБіаІод ( "РегзопаІІпі.ЬЬтІ" , 
біа1одМісЗЬЬ:25егп; (ЗіаІодНеідЬС :28еш;'); 





234 


Глава 7 


В этом примере открывается модальное диалоговое окно, код ко¬ 
торого хранится в файле РегзопаІІпГ.ЫлпІ, находящемся на ком¬ 
пьютере в одной папке с файлом основной \ѴеЬ-страницы. Пример 
модального диалогового окна показан на рис. 7.9, а его код — в ли¬ 
стинге 11. 



[Введите данные: 


(ЬрАмтіЪ ил 
‘Шті 

г ^ Ф*гіЯИ<;«- 

*ЛЖ« «те грт-уте«*« 

ІЬгемкде. 

0*--лгі заі$05і' 
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I, •№>№»* о , ' 

ГЭ-- ; ^ | 

Рис . 7 . 9 . Модальное диалоговое окно 
Персональная информация 

Листинг 7.7. НТМІ.-КОД диалогового окна РегвопаІіпГ .Ылпі 

<нтмь> 

<НЕАО> 

<ТІТЬЕ>Персональная информациж/ТІТЬЕ> 

<8СКІРТ> 

ГипсСіоп зеТѴаІиез(){ 

ѵаг агКеГигпѴаІиеБ = пем Аггау(}; 

агКеЬигпѴаІиезI0] = йосшпепС .Гогтз[0].еіешепез[0].ѵаіие; 
агКеТигпѴаІиез [ 1 ] = Йоситеп! . іотз [ 0 ] . еІетепСз [ 1}. ѵаіие ; 
агКеСигпѴаІиез[2] = босишепс.1огтз[03 .е1етепЬз[2].ѵаіие; 
агКеі.игпѴа1иез [ 3 ] = йоситепС . Іогшз [ 0 ]. еіетепсз [ 3 ]. ѵаіие; 
агКеСигпѴа1иез[4] = боситепС.!огтз[0].е1етепІ;Б[4]-ѵа1ие; 
міпбом.гесигпѴаІие = агЕесигпѴаІиез; 
міпйом.с1озе(); 

} 

</5СКІРТ> 

</НЕА0> 

<ВСЮУ ВСС0Ь0К="ЯРЕРР66"> 
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<Н1>Введите данные:</Н1> 

<РОКМхРхРОЫТ СОЬОЕ= ’ геб 1 х8ВР>*</зиРх/Р0ЫТ>Фамилия | 
имя:<ВК> 

<ПІРЦТ ЫАМЕ="*іе1бАиІ:Ъог" Ю=" ЕіеІбАиШэг" 8І2Е="30“ 
(ЖСНАЫСЕ="ѵаг раЫ:ет=/[' А-я* ] /? ІЕ (Іраиіегп.іезі: (ТЬіз. 
ѵаіие) II !РЬіз.ѵаіие) а 1 ег 1: ( 'Неверный формат в поле 
\' Фамилия , имя\'');"><ВЕ> 

<ЕО№Г СОЬОЕ= ' геб ‘ х81ІР>*</51)Рх/ЕОМТ>Почтовый адрес : <ВК> 
<ІЫРЦТ ЫАМЕ="ІіеІбАббгезз" ЗігЕ= в 54" <Л*СНАЫСЕ="ѵаг 
раЬЬегп=/[’А-я' ,'0-9*, 1 і^(!раіІ:егп. 

ЬезР (СЫз.ѵаіие) II !РЪіз.ѵаіие) аіегс(' Неверный формат 
в поле \ 'Почтовый адрес \' *); "><ВК> 

<РОИТ СОЬОН=' геб' хЗиР>*</51]Рх/Е(ЖТ>Электронная 
почта:<ВК> 

сІЫРІІТ ЫАМЕ="СіеІбЕМаіІ" 8І2Е="30" (ЖСНАЛСЕ="ѵаг 
раРРегп=/ [ ’А-я*,' ']/; іі (раНЬегп.ЬеБМ СЪіз.ѵаіие) 

ІІ !РЬіз.ѵаіие II іПіз.ѵаіие.іпбехОІ{ , @‘)==-1) 
а1ег Ь ( 'Неверный формат в поле \'Электронная почта\ 

'');"></Р> 

<РхВ>Описание документа</ВхВЕ> 

Заголовок<ВЕ> 

<ІКРОТ ЫАМЕ"*іе1бТІЫе“ 8І2Е=-54-хВЕ> 

Описание {одной строкой)<ВЕ> 

<ІЫРВТ ЫАМЕ='1іе1б0езсгірі:іоп" 8І2Е="54"х/Р> 

</РхШРПТ ТѴРЕ='ЬиОЬоп' ѴАШЕ="ОК" 

(ЖСІіІСК=“зеЬѴаІиез()"> 

<ПІРЦТ ТУРЕ="ЬиЫ:оп- ѴАШЕ=" Отмена" СЖСЫСК="міпбом. 
сІозеО "></Р> 

</РОКМ> 

</БОБУ > 

</нтмь> 

Диалоговое окно содержит пять текстовых полей. Первые три 
поля - Фамилия, имя: Почтовый адрес; Электронная почта — помече¬ 
ны красными звездочками. Это означает, что данные поля обязатель¬ 
но должны быть заполнены пользователем. Обратите внимание на то, 
как настроена проверка полей формы: 

♦ Фамилия, имя — только буквы русского алфавита, пустая 
строка не допускается; 

♦ Почтовый адрес только буквы русского алфавита, цифры и 
знаки препинания, пустая строка не допускается; 
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♦ Электронная почта нельзя использовать буквы русского 
алфавита и пробелы, обязательно должен присутствовать сим¬ 
вол пустая строка не допускается. 

Два оставшихся поля диалогового окна. Заголовок и Описание, не¬ 
обязательны и могут содержать любые комбинации символов. 

Функционирование кнопок диалогового окна мы рассмотрим в 
следующем подразделе. 

Обмен данными с диалоговым окном 

Модальное диалоговое окно открывается следующей строкой ко- 
да]аѵа8<гір( 

Оіаіод = иіпйом.зЬомМойаІБіаІод ( "РегзопаІІпі.Іинпі", "", 
діа1одИі<ЗЫі:25ет; йіаІодНеідЫ::28ет;") ; 

Это напоминает открытие немодального диалогового окна с помо¬ 
щью метода міпйою.ореп. В обоих случаях создается переменная, ко¬ 
торой присваивается результат выполнения метода бЬ оиМойа 1 Оіаіод 
или ореп. Но резульгаты этих методов совершенно разные. Если ме¬ 
тод ореп возвращает объект окна обозревателя для манипулирования 
им в следующих строках кода сценария, то метод бЬ омМойа 1 Оі а1од 
работает иначе. Во время отображения на экране модального диа¬ 
логового окна выполнение сценария прерывается. После закрытия 
окна метод вііоѵ/МосіаІ Оіаіод возвращает в переменную результат. 
Какой же результат будет возвращен в переменную Оіаіод, если 
в нашем окне, показанном на рис. 7.9, содержится целых пять тек¬ 
стовых полей? 

Модальное диалоговое окно возвращает значение, содержащееся 
в стандартной переменной ѵ/іпйом.геГигпѴаІие. Этой перемен¬ 
ной можно присвоить любое значение — логическое Тгие или іаізе, 
число, текст, массив или объект. В нашем примере в листинге 7.7 щел¬ 
чок на кнопке ОК приводит к вызову функции зесѵаіиев. Эта 
функция возвращает значения всех нолей формы и заносит их в 
массив агКеСигпѴаІиез, который затем присваивается переменной 
міпсіом . геСигпѴаІие. Именно этот массив и будет возвращен пере¬ 
менной Оіаіод сразу после выполнения метода иіпйом.сіове (), ко¬ 
торый закрывает диалоговое окно. 

Кнопка Отмена просто выполняет метод міпйом.сіове (). В этом 
случае в переменную Оіаіод будет возвращено значение КаЮ 
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Чтобы убедиться, что все происходит именно так. да¬ 
вайте создадим \ѴеЬ-страницу, использующую мо¬ 
дальное диалоговое окно. НТМЬ-код этой страницы 
показан в лист инее 7.8. 


Листинг 7.8. Код основной ѴѴеЬ-страницы, использующей 
модальное диалоговое окно 

<нтмь> 

<НЕАР> 

<5СКІРТ> 

ѵаг Біаіод = пем Аггау(); 

ѵаг Ріеібе = пей Аггау("Фамилия, имя","Почтовый 
адрес","Электронная почта","Заголовок","Описание") 
€ипсСіоп 5Ііоѵг__<Зіа1од () { 
оиСриГ. іппегНТМІ. = " " ; 

Оіаіод = ѵапйоѵг вйокМосіаІПіаІод("РегвопаІІпЕ.ЫлпІ", 
"(Ііа1одМібиі:25ет; біаІодНеідЫ: :28ет;") ; 

Еог (і=0; і<0іа1од. Іепдгіг; і++) 

оиСриС. іппегНТМЬ +~ ("<В>" + Ріе1ЙБ[і] + "</В>: " + 
ОіаІодЩ + "<ВК>") 

} 

</8СКІРТ> 

</НЕАО> 

<ВООУ> 

<ГОРМ> 

<ІИРЧТ ТУРЕ- 1 ЬиССоп ' ѴАШЕ="Открыть диалог " 
ОНСЬІСК="зЪоѵ7_сІіаіод() "> 

</РОКМ> 

<Р ИАМЕ=’ оиЬриС 1 ІБ=' оиСриС '></Р> 

</В(ЖУ></НТМЬ> 


Эта \ѴеЬ-страница содержит единственную кнопку Открыть диа¬ 
лог Щелчок на кнопке вызывает на выполнение функцию з1том_сІіа- 
Іод. Функция содержит уже известную вам строку открытия модель¬ 
ного диалогового окна. После закрытия диалогового окна выполня¬ 
ется цикл іог, который выводит на \ѴеЬ-страницу значения массива, 
возвращенного модальным окном (рис. 7.10). 

Обмен данными между \ѴеЬ- с трап и цей и диалоговым окном дву¬ 
сторонний. Мы можем не только получать результат работы пользо¬ 
вателя с диалоговым окном, но и передавать исходные данные во вто¬ 
ром аргументе метода БЙоиМосіаІОіаІод. 
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Рис. 7.10. Текст, введенный в поля формы 
(см. рис. 7.9), отображен в окне основной ХѴеЬ- 
страницы 



Например, давайте сделаем так, чтобы при повтор¬ 
ном открытии диалогового окна в нем отобразилась 
ранее введенная информация. 


1. Передадим в диалоговое окно исходную переменную Біаіод, 


добавив ее во второй аргумент метода зйомМосІаІВіаІод: 


Біаіод- = ѵ/іпсіом.зйоиМойаІБіаІод ( "Регзопаііпі .Ьіші я , 
Біаіод, "йіа1одИісіС1і:25ет,- сііаІодНеідЬС :28ет;"); 



Обратите внимание на то, что в листинге 7.8 пустой 
массив Біаіод создается в сценарии вне кода функции 
8йок_йіа1од, а в функции перед переменной Біаіод не 
установлен оператор ѵаг, что указывает на использова¬ 
ние глобальной переменной (о глобальных и локаль 
ных переменных речь шла в главе 4). Если не соблюсти 


эти условия, при открытии диалогового окна произой¬ 


дет ошибка. 


2. В модальном окне значение второго аргумента автоматически 
присваивается стандартной переменной міпскж.біаІодАгди- 
тепТБ. Добавим в основной раздел НТМЬ-кода \ѴеЬ-страницы 
РегзопаІІпі .Ъші сценарий обработки значения перемен¬ 
ной міпйом.біаІодАгдшпепЕБ: 
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<ЗСКІРТ> 

Рог { і-0 ; ісміпйом. йіаІодАгдитепСз. ІепдЫі; і++) 
йоситепС . Рогтз [ 0 ]. еіетепгз [ і ]. ѵаіие = кіпйоѵ/. 
й і а 1 одАгдитепС з [ і ]; 

</8СКІРТ> 

3. Этот сценарий заполняет поля формы данными из переданно¬ 
го массива. Чтобы программа работала без ошибок, нам нужно 
еще изменить код кнопки Отмена. Действительно, сейчас эта 
кнопка просто закрывает диалоговое окно, возвращая значе¬ 
ние ЫаН, которое присваивается переменной иіаіод. При сле¬ 
дующем открытии диалога это же значение ЫаИ будет передано 
переменной міпйом.йіаІодАгдишепСз, что приведет к ошибке 
при выполнении сценария. Нужно, чтобы кнопка Отмена воз¬ 
вратила исходный массив данных. Проблема решается очень 
просто. Изменим код события (ЖСЫСК кнопки Отмена следую¬ 
щим образом: 

0КСЬІСК= в міпйок.геіигпѴа1ие = міпйом.йіаІодАгдшпепІБ; 
міпйоѵ/ . сіозе () * 

Прежде чем закрыть окно, массив из переменной ѵ/іпйом. 
йіаІодАгдитепсз присваивается переменной ѵ/іпйом. геСигп 
Ѵаіие и возвращается обратно в переменную Біаіод. 

Теперь, щелкнув на кнопке Открыть диалог, мы получим диа¬ 
логовое окно, в котором все поля будут заполнены исходными 
данными (рис. 7.9). Окончательный вариант основного разде¬ 
ла НТМИ-кода диалогового окна показан в листинге 7.9. 

Листинг 7.9. Окончательный вариант НТМІ_-кода файла 
РегаопаІІпР . Ьдті 

<ВСЮУ ВСС0Ь0К="#ГРРР66"> 

<Н1>Введите данные:</Н1> 

<ЕОКМхР><РОЫТ СОЬОК= ' гей' ><6ЦР>*</ЗЦРх/Р(ЖТ>Фамилия, 
имя:<ВР> 

<ІИРПТ ЫАМЕ="1іе1йАиГЬог" Ю=-ііе1йАиНіОГ и 8І2Е="30* 
(ЖСНАЫСЕ^"ѵаг раЬСегп=/{ 1 А~я*]/; і!(ІраСЬегп.сезс(ТЪ іб. 
ѵаіие) II іСЪіз.ѵаіие) аіегс(' Неверный формат в поле 
\' Фамилия, имя\ 1 ');"><ВК> 

<Р(ЖТ СОЬОЕ= ' гей' х 30Р> * < / ЗІІРх /РОЫТ>Почтовый адрес :<ВК> 
<ШРІІТ ИАМЕ-"ІіеІйАййгезз" 8І2Е="54" ОМСНАШЕ= ■ ѵаг 
раДСегп=/['А-я','0-9' 1 іЕ(ІраССегп. 
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СезЫСІііз.ѵаІие) II !Ый8.ѵа1ие) аіегс(' Неверный формат 
в поле \'Почтовый адрес \'');"хВК> 

<Р(ЖТ СОЬОК='гей' ><8УР>*</811Р></РОНТ>Электронкая почта:<ВК> 
сІИРУТ ЫАМЕ-"СіеІйЕМаі 1" 5І2Е="30“ СЖСНАШЕ="ѵаг 
рагхегп=/['А-я',' ']/; (рагсегп.сезМГЬіз.ѵаІие) II 
ІСЬіз.ѵаІие II СПіз.ѵаІие.іпбехОІ(' )=--!) аіегс 

(‘Неверный формат в поле \ ' Электронная почта\ ’' ) ; ”></Р> 
<РхВ>0писание документа</ВхВК> 

Заголовок<ВН> 

<ІМРОТ КАМЕ Тіеіаті Сіе" ЗІ2Е="54"хВК> 

Описание (одной строкой)<ВК> 

<7ЫР0Т ЫАМЕ=" ІіеІсЮезсгірСіоп" $І2Е=”54"х/Р> 
с/РхШРОТ ТУРЕ= "ЪиССоп" ѴАШЕ="ОК" 

СЖСІЯСК= " зеСѴаІиез () "> 

<ІМРІІТ ТѴРЕ= в ЬиЬСОп" ѴАШЕ= "Отмена " 0ИСЫСК= "міпбои. 
геСигпѴаІие = ѵ?іп6ом.аіа1одАгдитепРз; ш.п<Зом„с1озе()"></Р> 
</РОНМ> 

<ЗСКІРТ> 

Ног (і-0;і<міпйом.йіаІодАгдитепСз.ІепдСЬ;і++) 
сіоситепс. Гогтз [01-еІетепСз {і ].ѵаіие = ыіпйои. 
йіаІодАгдитепСз [ і ] ; 

</ЗСВІРТ> 

</ВСЮѴ> 


Работа с внешними файлами в Іаѵа5сгірі 

На ХѴеЬ-страницах можно использовать и показывать данные, хра¬ 
нящиеся в других файлах. Более того, сценарии документов НТМБ 
применяют для сохранения данных на диске компьютера. Использо¬ 
вание данных из внешних файлов позволяет облегчить и сделать бо¬ 
лее понятным НТМЬ-код \ѴеЪ-страницы. Запись на диск может осу¬ 
ществляться с применением нескольких разных технологий. 

♦ Технология соокіез позволяет записывать на диск в особую пай¬ 
ку временных Интернет-файлов информацию о текущей на¬ 
стройке пользователем конфигурации \ѴеЬ-страницы. В ре¬ 
зультате при следующем открытии \ѴеЪ-страница появится 
в том виде, в каком пользователь завершил с ней работу во 
время предыдущего сеанса. Очень полезная технология, но ее 
изучение выходит за рамки этой книги. 
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♦ Другой подход состоит в записи информации в любом месте на 
диске пользователя с помощью методов непосредственного об¬ 
ращения к файловой системе компьютера. В отличие от обмена 
данными е помощью форм запись будет производиться не на 
сервер, а на компьютер пользователя. Это имеет смысл только 
при работе в іпігапеі или при использовании \ѴеЪ-приложе- 
ний па своем компьютере для редактирования собственных 
баз данных. 


Извлечение данных из внешних файлов 

\УеЪ-страннцы часто используют для представления информации, 
хранящейся в базе данных. Доступ к ирофессионааьным базам дан¬ 
ных осуществляется с помощью программ, запускаемых на \ѴеЪ-сер- 
вере. Но чтобы получить доступ к простой базе данных, записанной 
в текстовом файле на вашем компьютере, можно обойтись средства¬ 
ми |аѵа8сгірі. 


Ввод данных из внешних файлов сценариев 

При изучении основ языка НТМ П в главе 2 вы узнали о том, что 
на \ѴеЬ- страницах можно использовать сценарии, сохраненные во 
внешних файлах, с помощью атрибутов 5КС дескриптора <$СКІРТ>, 
например: 

<ЗСКІРТ 5КС="Му5сгірС . 35 "></ЗСКІРТ> 



В данном примере добавляется код сценария, храня¬ 
щегося в файле МуБсгірт . 35 . Файл может иметь любое 
расширение. Важно только, чтобы он содержал обыч¬ 
ный текст без форматирования, а код, хранящийся в 
файле, соответствовал синтаксису и структуре языка 
.ІаѵаЗсгірІ:. Сценарий, добавленный из файла, сразу же 
исполняется обозревателем. 


В отдельном файле можно сохранять любые сценарии, включая 
исполняемые команды, определения пользовательских функций 
и переменных. Сценарии будут исполняться точно так же, как если 
бы код сценария был вписан непосредственно на ѴѴеЪ-стра ницу. 



Рассмотрим пример базы данных, сохраненной в виде 
внешнего сценария в файле <ЗЪ - 3 в, как показано в ли¬ 
стинге 7.10. 
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Листинг 7.10. База данных в файле йЪ. зв 

ѵаг ЙЪ = пем Аггау( )? 

ЙЪ[0] = пеѵг Аггау(1,1,0.25); 

ЙЪ[1] = пеѵ? Аггау(1,2,0.7Ь); 

ЙЪ[2] = пем Аггау (1,3,1.00); 

ЙЫ1037] = пем Аггау(215,74,0.11); 

ЙЬ[1С38] = пек Аггау (2X5,75,0.00); 

Это матрица из множества столбцов и строк, сохраненная в виде 
двумерного массива ЙЬ. Каждый элемент массива ЙЪ представляет со¬ 
бой вложенный массив из трех элементов — номера столбца матри¬ 
цы, номера строки и значения в формате числа с плавающей запятой. 
Если в код \ѴеЬ-страницы добавить строку <8СКІРТ 5КС =,, йЪ. І8"> 
</5СКІРТ>, то во время загрузки документа автоматически будет создан 
глобальный массив йЪ, который можно будет использовать для демон¬ 
страции данных на \ѴеЬ-странице. Вы можете себе представить, насколь¬ 
ко тяжело было бы работать с кодом ШеЬ-страницы в случае добавле¬ 
ния этого огромного массива данных непосредственно в код НТМЕ. 

Впрочем, редактировать такую базу данных вручную с помощью 
текстового редактора тоже тяжело. Ниже в разделе «Редактор базы 
данных» вы найдете пример ШсЬ-страницы, которую можно исполь¬ 
зовать на своем компьютере в качестве редактора для изменения и со¬ 
хранения небольших баз данных. 

Открытие текстовых документов 

Если вы захотите с помощью ^ѵаЗсгірІ создать небольшое \ѴеЪ- 
приложение для работы на собственном компьютере, то сможете 
использовать текстовые файлы как источник данных. ^ѵаЗсгірі со¬ 
держит ряд встроенных функций для обращения к файловой системе 
компьютера. Понятно, что эта технология неприменима к \ѴеЬ-стра- 
ницам, публикуемым в Интернет. 

Для открытия текстового файла используется следующий синтаксис; 
ѵаг іібо = пем АссіѵеХОЪзесМ "ЗсгірТіпд.ГіІеЗувСешОЬзесС") ; 
ѵаг €і1е = Сзо.ОрепТехТРіІеі "путь 9 , параметр ) ; 

Текстовый файл открывается в два этапа. Сначала сов 
дается переменная Сео с объектом файловой системы 
компьютера, а затем с помощью метода ОрепТехиРіІе 
этого объекта открывается файл на диске, который при 
сваивается новой переменной Іііе. 
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Методу ОрепТехіРіІе передаются следующие аргументы: 

♦ путь — путь к файлу на диске; 

♦ параметр — числовое значение, указывающее режим открытия 
файла: 

• 0 — только для чтения (по умолчанию); 

• 2 — для записи с затиранием имеющейся информации; 

• 8 — для добавления новых данных в конец файла. 
Объект файла содержит методы доступа к данным, перечислен¬ 
ные в табл. 7.2. 

Таблица 7.2. Методы чтения данных из файла 


Метод 

Кеай(п) 
КеайАІІ {) 
КеадЬіпе {) 
Зкір(п) 
БкірЬіпе() 


Описание 

Считывает следующие п символов 
Считывает весь текст до конца файла 
Считывает текущую строку 
Пропускает следующие п символов 
Пропускает текущую строку 


Считывание данных из файла происходит последовательно толь¬ 


ко в одном направлении от начала до конца, т.е. несколько вызовов 
СіІе.КеасІЪіпе () один за другим будут считывать последовательно 
строку за строкой. Методы Зкір и ЗкірЬіпе сдвигают точку считы¬ 
вания, не возвращая данных из файла. 



Давайте в текстовом редакторе Блокнот введем 
текст, показанный на рис. 7.11, и сохраним его в файле 
тезе .гхС в корневой нанке диска С. Теперь создадим 
Ѵ/еЬ-страницу со сценарием из листинга 7.11. 


Листинг 7.11. Считывание данных из текстового файла 


<ЗСКІРТ> 

ѵаг 1:80 = пей АсТіѵеХОЪзес1:(*8сгір1:іпд.Рі1е8узі:етОЬзесІ:") ; 
ѵаг і = ^зо.0репТехі;Рі1е("с:\\1:е8І;.і:х1:"); 
ѵДііІе (! Е .АЬЕпйОНЗЪгеат) 

йосшпепЬ„мгіСе{і.КеайЬіпе()+"<ВК>"); 
і .С1озе(); 

</5СКІРТ> 


Результат выполнения сценария показан на рис. 7.12. 
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Рис. 7.11. Содержимое фай¬ 
ла сее*-.ехС в приложении 
Блокнот 
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Рис. 7.12. Результат выполнения сце 
нария листинга 7.11 



Обратит 0 внимание на то, как в листинге 7.11 задает 
ся цикл иЫІе до конца файла. Признаком окончания 
файла служит свойство АСЕг.сіОІБІ гьат. которое при¬ 
нимав. значение ьгче, как только точка считывания 
дойдет до конца файла. Работа с файлом обязательно 
должна завершаться закрытием объекта с помощью 


метода сіове (). 



Обозреватель оонаруживает на ѴѴеЬ странице потен 
циально опасный код с функциями обращения к файло¬ 
вой системе компьютера и выводит окно предупрежде¬ 
ния (рис. 7.13). Г іредупреждение не напрасно, так как 
некоторые вирусы и другие вредоносные программы 
используют данные функции для копирования себя на 
диск Если вы уверены в программе, просто щелкните 
на кнопке Да. 



Рис. 7.13. Окно преоупреждения 
о наличии на Ѵ7еЬ-етраницг‘ по¬ 
тенциально опасных элементов 
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Сохранение данных в файле 

Для того чтобы сохранить данные в текстовом файле, прежде все¬ 
го необходимо открыть файл так, как мы делали это в предыдущем 
примере. Только теперь нужно установить такие параметры режима 
открытия, которые позволяли бы вести запись в файл (2 или 8, см. 
выше). Для записи используются методы фаіілового объекта, пред¬ 
ставленные в табл. 7.3. 


Таблица 7.3. Методы записи данных в файл 


Метод 

Описание 

Кгісе(" текст") 

Игі^еВІапкЬіпеБ (л) 

МгіСеЬіпе (" текст ") 

Вводит текст в текущую позицию 

Вводит п пустых строк 

Вводит текст и добавляет символ конца строки 


Запись данных, так же, как и считывание, происходит в одном на¬ 
правлении с начала до конца файла. Об использовании методов за¬ 
писи речь пойдет в следующем подразделе главы. 


Редактор базы данных 

Здесь мы рассмотрим пример редактора базы данных, основанно¬ 
го на \ѴеЬ-странице. Данный пример поможет закрепить знания, по¬ 
лученные как в этой, так и в предыдущих главах книги. 

Безусловно, редактор базы данных на основе сценария ^ѵа$сгірІ 
можно использовать только на персональном компьютере или в ігД- 
гапеі. По сети Интернет доступ к базе данных таким способом полу¬ 
чить невозможно. Хотя \ѴеЪ- интерфейсы доступа и редактиоования 
баз данных чрезвычайно широко распространены, в их основе лежат 
принципиально иные технологии, рассмотрение которых выходит за 
рамки этой книги. 

Тем не менее \ѴеЬ-страница, код которой приведен в листинге 7 12, 
может оказаться полезной для создания и редактирования неболь¬ 
шой собственной базы данных, сведения из которой можно представ¬ 
лять в Интернете помощью других \ѴеЬ-страниц узла. 

Листинг 7.12. Редактор базы данных 

<нтмь> 

<НЕ/Ш> 

<ТІТЬЕ> Редактор базы данных</ТІТЬЕ> 

<5СКІРТ> 
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// пустая база данных 
ѵаг аЪ = ГАЬЗЕ; 

// функция создания НТМЬ-кода раскрывающегося списка 
Гипсііоп деГ^зеІесГог (се!1_ісі} { 

ѵаг зеіесгог = "<ЗЕЬЕСТ 01ШЬГО=Гі11Се11 ('“ + се11_ій + 

" 1 , ГЪіз. ѵаіие) ; хОРТІСЖ ѴАШЕ= * нд' >НД< /ОРТІ(Ж> " ; 

Гог (п=0;п<=10;п+=1) 

зеіесіог += "<ОРТІОМ ѴАЫ)Е=" + п/10 + ■>■ + п/10 + 
"</ОРТІ(Ж>" 

зеІесГог += "</ЗЕЬЕСТ>" 
гебигп зеІесГог; 

} 

// функция добавления раскрывающегося списка в ячейку 
ГипсГіоп сгеаГеЗеІесГог (се11_ісІ) { 

// определяем координаты ячейки 
ѵаг се11_соогб = се11_ій.зрііг{■:■); 
ѵаг гом__пит = рагзеіпб (се11_соогсі[0]); 
ѵаг со1_пиш = рагзеіпі (се!1_соогсі[1]); 

// вставляем в ячейку раскрывающийся список 
танг іх.гомз[гом_пит].сеі1з(со1_пит].іппегНТМЬ = дес_ 
зеіесбог(се11_ій); 

} 

// функция заполнения ячейки выбранным значением 
ГипсСіоп ГіІІСеІІ (се11_і<3, ѵаіие) { 

// определяем координаты ячейки 
ѵаг се11_соогс! = се11_іс1. зрііг 
ѵаг гом_пит = рагзеІпГ{се11_соогсІ[0]); 
ѵаг со1_пші = рагзеіпб{се11_соогб[1]); 

// заполняем ячейку значением 

таыіх.гомз [ гои_тт] .сеііз [со1_гшт] . іппегНТМЬ = "<5Р/Ш 
0МСЫСК=сгеаСе5е1есГог ('" + се11_і(3 + + ѵаіие + 

■</ВРАЫ>"; 


// функция добавляет в таблицу пустую строку 
Гипсііоп асМ_гом(іп<1ех) { 
ѵаг гом = таЬгіх. іпзегЬЕоѵ/(іп<аех) ; 
ѵаг сеіі = гом.іпзегССеІІ(0); 
сеІІ.іппегТехЬ = іпбех; 

Гог (і=1;і<=6;і++) { 

сеіі = гом.іпзегГСеІІ(і); 

ГіІІСеІІ (іпсіех + ":" + і,"нд"); 
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} 

} 

// функция сохранения базы данных 
бипсбіоп еаѵе_йЬ() { 

// определяем путь к текущей папке 
. ѵаг сиггРабХі = аосишепб. Іосабіоп.рабЬпате 
роз = сиггРаббі . ІазбІпДехОб {"\\*) + 1; 
рабЬ = сиггРабЬ.зиЪзбгіпд(1,роз) + "йЪ.зз"; 

// открываем файл аЪ.]з для записи с замещением 

ѵаг бзо = пем АсбіѵеХОЪзесб ( "8сгірбіпд.Рі1еЗувбетОЬзесб") ; 

ѵаг б = бзо.СгеабеТехбРіІе(рабЬ); 

// записываем значения таблицы в файл 
іпдех =0; 

б .ИгібеЬіпе {"ѵаг <ЗЬ = пем Аггау {) " ); 
бог (і=1;і<шабгіх.гомв.ІепдбЪ;і++) { 

бог {^=1;э<шабгіх.гомз[і].сеііз.ІепдбЪ;]++) { 
б.ИгібеЬіпе{ "сЗЬ[" + іпйех + "] = пем Аггау ('" + 
і + + табгіх.гомз[і]. 

сеііз[ Я .іппегТехб + 
іпйех++; 

} 

} 

б .сіозе(); 

} 

</5СКІРТ> 

<5СКІРТ 5КС=*йЬ.:з , х/5СЕІРТ> 

</НЕАБ> 

<ВСШУ> 

<Н1>Электронная таблица</НІ> 

сТАВЕЕ МАМЕ='табгіх' І0='табгіх' В(ЛШЕК=1> 

<ТКхТН ИЮТН=20>&пЬзр</ТН> 

<ТН КІЕТН=100>А</ТНхТН ИЮТН=100>В</ТНхТН ИІБТН=100>С</ 
ТНхТН НЮТН=100>0</ТНхТН ИІ0ТН= 100>Е</ТНхТН ИЮТН=100>Р</ 
ТНх/ТЕ> 

</ТАВЬЕ> 

<Г0КМ> 

<ШРІІТ ТУРЕ=’Ьиббоп' ѴАШЕ='Добавить строку' СЖСЫСК='айб_ 
гом(таб гіх.гомз.Іепдбіі) 1 > 

< ІЫРОТ ТУРЕ= ' Ьиббоп 1 ѴАШЕ=' Сохранить' 0ЫСЫСК=' заѵе_аъ () * > 
</ЕОКМ> 

<5СНІРТ> 
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И (!6Ь) 
аскЗ_гсж{ 1) ; 
еізе ( 

Гог (5=0;5<йЬ.1епдГЬ;5++) { 
гои_пиш = сІЪ [ 5 ] [ 0 ]; 
соі_пиш = ЙЬ[5 І[Ц; 
ѵаіие = йЬ[б][2] ; 

іГ {гоо_пит > тасгіх.гомз.ІепдГЬ-1) { 
айс1_гом (таГгіх. гомз. ІепдіЪ); 

} 

ГіІІСеІІ(гои_пит + + со!_пит,ѵаіие); 

} 

} 

</5СКІРТ> 

</всюу> 

</нтмь> 

Работу мы начнем с чистого листа — с пустой базы данных, кото¬ 
рую в дальнейшем мы собираемся хранить в файле сІЪ. эз. Этот файл 
добавляется в виде внешнего сценария в строке: 

<5СКІРТ ЗКС='<ІЪ. ]5'х/5СК1РТ> 



Рис. 7.14. Пустая база данных 
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Если файл бЬ - і з отсутствует, эта строка кода будет пропущена 
без возникновения ошибки и управление программой перейдет к вы¬ 
полнению кода основного раздела ѴѴеЬ-страницы. На странице соз¬ 
дается таблица из одной строки с заголовками столбцов и форма 
с двумя кнопками Добавить строку и Сохранить. Код сценария про¬ 
веряет наличие массива базы данных 6Ъ, и если 6Ъ = ЫаЫ, с помо¬ 
щью функции абб_гом добавляется новая строка таблицы, как по¬ 
казано на рис. 7.14. 

Ячейки добавленной строки заполнены текстом нд, что означает 
♦нет данных». Кнопка Добавить строку вновь вызывает функцию 
абб_гом, добавляя новую строку. Текст в ячейках таблицы ведет себя 
очень интересно — щелчок на ячейке преобразует текст в раскрыва¬ 
ющийся список со значениями от О до 1 с шагом в 0,1, плюс значение 
нд. Как это происходит? 

1. В коде функцией абб_гом для заполнения каждой ячейки та¬ 
блицы вызывается функция ііІІСеІІ, которой передаются 
адрес ячейки (номер строки и столбца) и текущее значение. 

2. Функция ЕіІІСеІІ вставляет значение в ячейку как фрагмент 
текста в окружении дескрипторов <ЗРАЫ>...</8РАМ>. Событию 
ОИСЫСК дескриптора назначается вызов функции сгеаТеЗе- 
Іессог, которой передается адрес текущей ячейки. 

3. Функция сгеабеЗеІесЬог вставляет в ячейку по принятому 
адресу НТМЬ-код раскрывающегося списка, возвращаемого 
функцией деб_ее1есЬог. Функция дес^зеіесбог создает код 
списка с учетом адреса ячейки, в которую список добавляется. 
Адрес вновь используется в качестве аргумента знакомой вам 
функции I і 1 ІСеІ 1 в этот раз она назначена событию списка 
оивыж. 

4. Событие ОМВШК наступает при переходе от текущего элемента 
списка к любому другому элементу \ѴеЬ-страницы в результате 
щелчка мыши или нажатия клавиши <ТаЬ>. При этом в функ¬ 
цию ЛіІІСеІІ передаются адрес текущей ячейки и значение, 
выбранное в списке. 

5. Функция РіІІСеІІ замещает раскрывающийся список тек¬ 
стом выбранного значения, вставленного между дескриптора¬ 
ми <5РАЫ>...</8РАЫ> с установленным событием (ЖСЫСК. Цикл 
замкнулся. 




250 


Глава 7 



Давайте введем пять новых строк и заполним их так, 
как показано на рис. 7.15. 
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Рис. 7.15. Заполненная база данных 


Осталось сохранить базу данных щелчком на кнопке Сохранить. 
Эта кнопка вызывает на выполнение функцию заѵе_йЬ. 

1. В первых строках кода функции происходит обращение к фай¬ 
лу \УеЬ-страницы, который хранится в свойстве документа 
йосшпепС. 1оса{:іоп .раСЬпате. Это значение принимается за 
основу для формирования пути к файлу сІЪ. 35 , который дол¬ 
жен находиться в одной папке с файлом ЛѴеЬ-страиицы. 

2. Далее в функции создается объект файловой системы ком¬ 
пьютера 

ѵаг Еео = пем АсСіѵеХОЩеес ( "бсгірсіпд.РіІебузЬеш 
ОЬзесТ") 

При нервом обращении к этой функции обозреватель покажет 
окно предупреждения (см. рис. 7.13). Щелкните на кнопке ОК, 
чтобы продолжить работу. 
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3. В следующей строке открывается текстовый файл командой 
ѵаг і - ^во.СгеаСеТехСРіІе(раГЪ) 

Метод СгеаСеТехСРі 1е отличается от известного вам метода 
ОрепТехГРіІе тем, что он создает новый текстовый файл и сра¬ 
зу открывает его в режиме записи. Если такой файл уже суще¬ 
ствует, метод замещает его (изначально файл йЪ. :з в нашем 
примере отсутствует). Это вызвало бы ошибку в случае при¬ 
менения метода ОрепТехсРіІе. 

4. С помощью метода Игі^еЬіпе в файл записываются данные 
таблицы, после чего файл закрывается с использованием мето¬ 
да СІОБѲ () . 

Зайдите в программе Проводник в папку с \УеЪ-страницей. Теперь 
там должен появиться новый файл ЙЬ. і з. Откроем его с помощью 
приложения Блокнот, как показано на рис. 7.16. 
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Рис. 7.16. Файл базы данных в окне 
пршожения Блокнот 



В именах папок не должно быть пробелов, иначе ме 
тоды -геаЬеТехСЕі] е и ОрепТехСРіІе вызовут ошибку. 
Обязательно нужно закрыть объект файла методом 
сіозе (), иначе он останется недоступным при попытке 
открыть его в следующий раз. 
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Обратите внимание, что данные записаны именно в том формате, 
какой мы использовали ранее в листинге 7.10. Закройте окно обозре¬ 
вателя с \ѴсЬ-страницей и откройте ее вновь. Теперь содержимое фай¬ 
ла сІЬ о в будет добавлено как код внешнего сценария, и вы увидите 
все ваши данные в сохранности в таком виде, как на рис. 7.15. Можно 
снова отредактировать значения таблицы и сохранить изменения в 
файле базы данных. 

На этом мы заканчиваем изучение основ программирования сце¬ 
нариев на ^ѵаЗсгірІ;. Много полезных функций, методов, свойств и 
объектов остались за рамками этой книги. Если вас увлек ^ѵа8сгірІ, 
имеет смысл не останавливаться на достигнутом и продолжить из¬ 
учение этого простого, но мощного языка программирования. Вос¬ 
пользуйтесь справочниками и технической литературой, доступной 
в Интернет: 

♦ Ъс Гр: / / дідк і 1 Іег . пагод. ги /тапі /тепи. ЪЫп; 

♦ ЬЦ:р: //меЬ.сошрдос.ги/з'аѵазсгірі: -рЬр; 

♦ ЬСГр: //мѵлу. зБ-ехашрІее .сош/заѵаБсгірЪ/соге_зз15/; 

♦ ІіСЪр: //ммм.даппуд.сот/гег/ іздиіскгеі: .Ы:т1. 
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инкремента, 135 
конкатенации, 140 
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объявления локальной 
переменной , 117 
полиморфизм, 141 
приоритет, 136 
присваивания, 139 
сравнения, 139 
условный. 168 
Операция 

арифметическая, 134 
логическая, 139 
строковая, 140 

п 

Панель ссылок, 58 
Переменная. 109 
глобальная, 116 
имя, 111 

конфликт имен, 117 
логическая, 115:139 
локальная, 117 
область видимости, 116 
присвоение значения, 110 
строковая, 114 
тип, 111 
числовая, 112 
Поле редактора, 210 
Поле формы, 209 
проверка, 223 

Программное обеспечение, 23 
графический редактор, 30 
текстовый редактор. 29 
Проигрыватель клипов, 193 

р 

Разрыв строки, 41 
Рамка 

создание, 63 
целевая, 64 
Редактор 

графический, 30; 49 
текстовый, 29 
Рисунок, 186 


альтернативный текст, 51 
выравнивание, 51 
добавление, 49 
загрузка, 50 
область, 190 
размер, 51 

сохранение для \ѴеЪ, 50 
с низким разрешением, 51 
фоновый, 52 

с 

Свойство, 20 

элемента \ѴеЬ-страницы, 39 
Символ 

служебный, 212 
специальный, 35 
Случайное число, 138 
Событие, 20; 77 
Сохранение данных, 245 
Список, 217 

динамическое изменение, 96 
маркированный, 44 
многоуровневый, 44 
нумерованный, 43 
Строка состояния, 100; 183 
Строка текста, 114 
Сценарий 

альтеративный текст, 72 
ветвление, 161 
во внешнем файле, 71 
добавление в НТМЬ-код, 71 
документирование. 107 
назначение гиперссылке, 81 
назначение событию, 77 
сокрытие, 72 
файл внешний. 241 

т 

Таблица 

выравнивание, 57 
граница, 59 

динамическое изменение, 94 
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объединение ячеек, 61 
размер. 56 
создание, 55 
форматирование, 60 
Таймер функции, 170 
Текст 

анимация, 183 
выравнивание, 40; 66 
динамический, 82 
заголовка окна обозревателя. 102 
пробелы и отступы, 41 
строки состояния, 100; 183 
форматирование, 46; 65; 104; 144 
фрагмент, 65 
Тело цикла, 150 
Тип данных, 111 
динамическое определение, 120 
преобразование, 121 

ф 

Файл 

открытие, 241 
сохранение, 245 
точка считывания, 243 
Форма 

загрузка файла, 232 
кнопка, 75 

переключатель, 75; 214 
подача данных. 225 
поле ввода, 74 
создание, 73 
список, 217 
флажок, 75; 214 
Формат 
видеоклипа, 54 
графический, 30; 48 
звуковой, 54 


Форматирование динамическое, 104 
Функция 

задержка выполнения, 170 
обработка события, 81 
объявление, 80 
пользовательская. 80 
список аргументов, 80 

Ц 

Цвет 

индексированный. 50 
установка, 46 

фон ШеЪ-страницы, 47; 105 
Целое число. 112 
Цикл, 150 
Гог. 150 
лѵЬіІе, 152 
вложенный, 154 
прерывание. 157 

ч 

Число с плавающей запятой, 114 

э 

Элемент \УеЪ-страницы 
именование, 79 
позиционирование, 67 
свойство, 39 

создание динамическое, 93 
Элемент формы, 73 

я 

Язык программирования, 14 
интерпретируемый, 16 
компилируемый, 15 
объектно-ориетированный, 18 




Лаѵа$сгірі 


Если вы почувствовали, что вашим ѴѴеЬ- 
страницам недостает динамичности, гибкости и 
собственного характера, обратитесь к сцена¬ 
риям С помощью сценариев вы сможете 
сделать документ таким же «умным», как вы 
сами вдохнуть в него жизнь и собственный 
характер Сценарии - это небольшие програм¬ 
мы вписанные в НТМІ_-код ѴѴеЬ-страницы а 
^ѵаБспрІ - пожалуй, наиболее популярный 
язык написания сценариев для \Л/еЬ-страниц. 
Этот язык создавался для широкого круга 
разработчиков ѴѴеЬ-страниц, не являющихся 
профессиональными программистами Жела¬ 
тельно, чтобы читатель имел представление о 
коде НТМб ѴѴеЬ-страниц. Впрочем, сведении об 
НТМЦ представленных в этой книге, будет 
достаточно для создания новичками небольших 
персональных ѴѴеЬ-страниц. 
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